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 |