CSS Combinators: Siblings

Welcome to the third entry in my series of CSS combinators. In this entry we will go over the adjacent sibling combinator and then next week will be the finale, the general sibling combinator.

The adjacent sibling operator(aso from this point on) can be identified with its use of a '+' in between two CSS selectors. As we always do, lets setup an example to follow along with.

<div class='dr-light'>
 <h1>Dr.Light's Family</h1>
   <p class='mega-man'>
   <p class='roll'>
   <p class='proto-man'>
</div>

One way to use the aso in CSS could be like this:

h1 + p {
  something:blah blah
}

Within this example we want the css inside the block to effect any siblings that may follow an h1 tag that will be a p tag. However, that wont work in this case. the h1 tag ACTUALLY is the parent of the following p tags within the html document. So while the idea is right...this wouldn't change anything on the document. If we changed the above mistake into:

p + p {
  something:blah blah
}

The HTML would be affected, but the only tags that would be affected are the 2nd, and 3rd. They both are adjacent siblings of the p tag, while the first sibling is not. Another cool way to declare some kind of specificity within CSS.

As always, give is some practice and HAPPY CODING!!