HTML Learning Notes CSS (selector 4)

CSS descendant Selector

The descendant selector (descendant selector) is also known as the containing selector.
Descendant selectors can select elements that are descendants of an element.

Select elements based on context

We can define descendant selectors to create rules that make these rules work in some document structures, but not in other structures.
For example, if you want to apply a style only to the EM element in the H1 element, you can write this:

H1 em {color:red;}

The above rule turns the text of the EM element as the descendant of the H1 element into red. Other EM text (such as EM in a paragraph or block reference) is not selected by this rule:

<H1>This is a<em>Important</em>Heading</H1><P>This is a<em>Important</em>Paragraph.</P>

Grammatical explanations

In the descendant selector, the selector end of the left side of the rule includes two or more selectors separated by spaces. The space between selectors is a combination (combinator). Each space-bound character can be interpreted as "... In... Find "," ... As... Part of the "," ... As... , but requires that the selector must be read from right to left.
Therefore, the H1 EM selector can be interpreted as "any EM element as a descendant of the H1 element." If you want to read the selector from left to right, you can replace it with the following: "All H1 that contain EM will apply the following style to the EM".

CSS child element Selector

Child selectors can only select elements that are child elements of an element, as compared to descendant selectors.

Select child elements
If you do not want to select any of the descendant elements, but want to narrow the range and select only the child elements of an element, use the child element selector (children selector).
For example, if you want to select a strong element that is only a child of the H1 element, you can write:

H1 > Strong {color:red;}

This rule turns the two strong elements below the first H1 red, but the strong in the second H1 is unaffected:

<H1>This is<Strong>Very</Strong> <Strong>Very</Strong>Important.</H1><H1>This is<em>Really<Strong>Very</Strong></em>Important.</H1>

Because the second <strong> is not a child element of the H1, it is a child of <em>.

Grammatical explanations
You should have noticed that the sub-selector uses the greater-than sign (the sub-binding character).
The sub-Union can have whitespace on either side, which is optional. Therefore, there is no problem with the following wording:

H1 > Strongh1> strongh1 >strongh1>strong

If you read from right to left, selector H1 > strong can be interpreted as "Select all strong elements as child elements of the H1 element."

Combining descendant selectors and sub-selectors
Take a look at the selector below:

Table.company td > P

The selector above selects all the P elements that are child elements of the TD element, which itself inherits from the table element, which has a class attribute that contains company.

CSS Neighbor Sibling Selector

The adjacent sibling selector (adjacent sibling selector) selects the element immediately following the other element, and both have the same parent element.

Select adjacent Brothers
If you need to select an element immediately after another element, and both have the same parent element, you can use the adjacent sibling selector (adjacent sibling selector).
For example, if you want to increase the top margin of a paragraph that appears immediately after the H1 element, you can write:

H1 + P {margin-top:50px;}

This selector reads: "Select the paragraph that appears immediately after the H1 element, and the H1 and P elements have a common parent element."

Grammatical explanations
The adjacent sibling selector uses the plus sign (+), which is the adjacent sibling (adjacent sibling combinator).
Note: As with a sub-binding, there can be white space next to the adjacent sibling binding character.
Take a look at the following document tree fragment:

<Div>  <ul>    <Li>List Item 1</Li>    <Li>List Item 2</Li>    <Li>List Item 3</Li>  </ul>  <ol>    <Li>List Item 1</Li>    <Li>List Item 2</Li>    <Li>List Item 3</Li>  </ol></Div>

In the above fragment, the DIV element contains two lists: An unordered list, an ordered list, each containing three list items. These two lists are adjacent brothers, and the list item itself is also an adjacent sibling. However, the list items in the first list and the list items in the second list are not adjacent siblings because the two sets of list items do not belong to the same parent element (up to the cousin)

Keep in mind that you can only select the second element in two adjacent siblings with a single binding character. Please see the selector below:

Li + li {font-weight:bold;}

The above selector only changes the second and third list items in the list to bold. The first list item is not affected.

Adjacent sibling combinations can also be combined with other binding characters:

HTML > Body table + ul {margin-top:20px;}

This selector is interpreted as: Select all sibling ul elements that appear immediately after the table element, which is contained within a BODY element, and the body element itself is a child of the HTML element.

HTML Learning Notes CSS (selector 4)