Thursday

Today we're adding sibling combinators. Yesterday we spoke of child combinators, and I also mentioned grandchildren of an element. By this analogy, you should be able to figure out that a sibling selector will select elements that are on the same level as the leading selector. For example, in the ‹head› element, ‹meta› and ‹link› are siblings. To combine them in CSS, we use a tilde (~) character. While it would be nonsensical to style elements in the ‹head› element, it is simple to do so in the ‹body› element, as I will demonstrate in class.

To try this yourself, check out the W3Schools' code simulator for an opportunity to play with this combinator.