Child and Sibling Selectors

I think everyone understands the basic decendent selector, but let’s do a quick overview of the other selectors in this style: the child combinator, the adjacent sibling combinator, and the general sibling combinator.

ul li { margin: 0 0 5px 0; }
ul > li { margin: 0 0 5px 0; }

The first selector above is a decendant selector. It will select any list items that are anywhere underneath an unordered list in the markup structure. The list item could be buried three levels deep within other nested lists, and this selector will still match it. The second selector above is a child combinator selector. This means it will only select list items that are direct children of an unordered list. In otherwords, it only looks one level down the markup structure, no deeper. So if there was another unordered list nested deeper, the list item children of it will not be targeted by this selector.

I’ll admit it took me longer than it probably it should have (way back when) when I was learning the basics of CSS. In both cases, they are selecting list items that are children of unordered lists. But there is a difference between children and descendants.

 

Lubov Cholakova

Lubov CholakovaLubov has been with DMXzone for 6 years now, contributing to both Marketing and Content departments. She is bringing high quality content in the form of daily blog updates, reviews, tutorials, news, newsletters,update emails and extensions' manuals. If you have a product that needs publicity or any other questions about the entire DMXzone community, she is the one you can contact.

See All Postings From Lubov Cholakova >>

Place your comment about Child and Sibling Selectors




You must me logged in to write a comment
Comments

Be the first to place a comment