{"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 […]<\/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":{"_acf_changed":false,"_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":"","_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"tags":[],"acf":[],"share_on_mastodon":{"url":"","error":""},"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_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}]}}