{"id":14150,"date":"2011-09-06T19:48:08","date_gmt":"2011-09-07T02:48:08","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14150"},"modified":"2015-03-26T15:24:37","modified_gmt":"2015-03-26T22:24:37","slug":"adjacent-sibling","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/a\/adjacent-sibling\/","title":{"rendered":"Adjacent sibling"},"content":{"rendered":"
The adjacent sibling combinator in CSS isn’t a selector on its own, but a way of combining two selectors. For example:<\/p>\n
p + p {\r\n margin: 0;\r\n}<\/code><\/pre>\nThe plus sign (+) is the adjacent sibling combinator, between two paragraph tag (element) selectors. What this means is “select any paragraph tag that is directly after another paragraph tag (with nothing in between)”. Here’s some examples of what it would select:<\/p>\n
<div>\r\n <p>I'm a paragraph<\/p>\r\n <p>I get selected!<\/p>\r\n<\/div>\r\n\r\n<div>\r\n <p>I'm a paragraph<\/p>\r\n <h2>Monkey hair<\/h2>\r\n <p>I will NOT get selected<\/p>\r\n<\/div><\/code><\/pre>\nThis is mostly useful for when using semantic markup and needing to adjust for certain scenarios in which elements are directly next to each other. <\/p>\n
See the Pen Adjacent Sibling Selector<\/a> by Sara Cope (@saracope<\/a>) on CodePen<\/a>.<\/p>\nMore Resources<\/h3>\n\n- A fine use for Adjacent Sibling Combinators<\/a><\/li>\n
- MDN Docs<\/a><\/li>\n
- W3C Spec<\/a><\/li>\n<\/ul>\n
Browser Support<\/h3>\n
\n\n\nChrome<\/span><\/th>\n Safari<\/span><\/th>\n Firefox<\/span><\/th>\n Opera<\/span><\/th>\n IE<\/span><\/th>\n Android<\/span><\/th>\n iOS<\/span><\/th>\n<\/tr>\n<\/thead>\n\n\nAny<\/td>\n Any<\/td>\n Any<\/td>\n Any<\/td>\n 7+<\/td>\n Any<\/td>\n Any<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"The adjacent sibling combinator in CSS isn’t a selector on its own, but a way of combining two selectors. For example: p + p { margin: 0; } The plus sign (+) is the adjacent sibling combinator, between two paragraph tag (element) selectors. What this means is “select any paragraph tag that is directly after […]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":14146,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":14196,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/g\/general-sibling\/","url_meta":{"origin":14150,"position":0},"title":"General sibling","date":"September 6, 2011","format":false,"excerpt":"The general sibling combinator (~) in CSS looks like this in use: .featured-image ~ p { font-size: 90%; } In that example, you would be selecting all paragraphs in an article that come after the featured image (an element with a class name of \"featured-image\") and making them of slightly\u2026","rel":"","context":"With 9 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14162,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/c\/child\/","url_meta":{"origin":14150,"position":1},"title":"Child","date":"September 6, 2011","format":false,"excerpt":"A child combinator in CSS is the \"greater than\" symbol, it looks like this: ol > li { color: red; } It means \"select elements that are direct descendants only\". In this case: \"select list items that are direct descendants of an ordered list\". To illustrate: WILL be selected WILL\u2026","rel":"","context":"With 7 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14186,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/f\/first-of-type\/","url_meta":{"origin":14150,"position":2},"title":":first-of-type","date":"March 12, 2013","format":false,"excerpt":"The :first-of-type selector in CSS allows you to target the first occurence of an element within its container. It is defined in the CSS Selectors Level 3 spec as a \u201cstructural pseudo-class\u201d, meaning it is used to style content based on its relationship with parent and sibling content. Suppose we\u2026","rel":"","context":"In \"first-of-type\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14224,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/l\/last-of-type\/","url_meta":{"origin":14150,"position":3},"title":":last-of-type","date":"March 12, 2013","format":false,"excerpt":"The :last-of-type selector allows you to target the last occurence of an element within its container. It is defined in the CSS Selectors Level 3 spec as a \u201cstructural pseudo-class\u201d, meaning it is used to style content based on its relationship with parent and sibling content. Suppose we have an\u2026","rel":"","context":"With 20 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14222,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/l\/last-child\/","url_meta":{"origin":14150,"position":4},"title":":last-child","date":"September 6, 2011","format":false,"excerpt":"The :last-child selector allows you to target the last element directly inside its containing element. It is defined in the CSS Selectors Level 3 spec as a \u201cstructural pseudo-class\u201d, meaning it is used to style content based on its relationship with parent and sibling content. Suppose we have an article\u2026","rel":"","context":"With 25 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14184,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/f\/first-child\/","url_meta":{"origin":14150,"position":5},"title":":first-child","date":"September 6, 2011","format":false,"excerpt":"The :first-child selector allows you to target the first element immediately inside another element. It is defined in the CSS Selectors Level 3 spec as a \u201cstructural pseudo-class\u201d, meaning it is used to style content based on its relationship with parent and sibling content. Suppose we have an article and\u2026","rel":"","context":"With 12 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14150"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14150"}],"version-history":[{"count":13,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14150\/revisions"}],"predecessor-version":[{"id":199067,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14150\/revisions\/199067"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14146"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14150"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}