Selecting children or descendants

Using the vocabulary associated with treesA way of representing the structure of information. as presented earlier, we can choose elements to style based on where they appear in the tree. In the definitions below, one and two are both selectors, which means that (based on what we have discussed so far) they can be tag names, class values, ID values, or combined selectors.

Child selectors

A child selector is of the form one > two. It specifies a rule that applies to any element selected by two which is a childA node "below" a node in a tree, connected by an edge. of an element selected by one.

Here are some examples:

Example Meaning
div > p any paragraph element that is a child of a division element
div > .one any element in class one that is a child of a division element
#special > .one any element in class one that is a child of an element with ID special

Descendant selectors

A descendant selector is of the form one two. It specifies a rule that applies to any element selected by two which is a descendantA child or child of a child or so on. of an element selected by one.

Here are some examples:

Example Meaning
ol a any hyperlink element in an ordered list
table.one span any span element in a table in class one
section,div#two p any paragraph that is in a section, or in a division element with ID two