Addressing Siblings

This is a more advanced concept and it's typically not needed frequently. So feel free to skip this section.

As described in section Hierarchy, elements can be defined by their hierarchy if they follow each other in a 'narrowing down' fashion. That means they can't be on the same level. If you need to address a tag which is on the same level but cannot or is not intended to be addressed in a list (list as described here Lists: Incremental CSS Selectors), you can use tilde ~ for loose sibling (any of the following elements on that hierarchy level) and + for exact sibling (the next element on that hierarchy level). This might be confusing at a first glance, so you might want to check the video below for a more hands-on demonstration.

Video Tutorial: Siblings