Child and Sibling selectors in CSS

A child combinator in CSS is the “greater than” symbol. It means “select elements that are direct descendants only”.

The ul li {} selector 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 ul "greater than" li 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.

There are 3 types of Child selectors in CSS :

1. Child combinator : Using a child combinator you can select only those top level list items and not worry about the large/header styling cascading down to the nested lists and having to fight against that styling.

2. Adjacent sibling combinator : An adjacent sibling combinator selector allows you to select an element that is directly after another specific element.

3. General sibling combinator : The general sibling combinator selector is very similar to the adjacent sibling combinator selector we just looked at. The difference is that that the element being selected doesn’t need to immediately succeed the first element, but can appear anywhere after it.