May 03, 2021 CSS
4. CSS - :first - child pseudo-class
6. Matches the first of all the elements
CSS Pseudo-classes
CSS pseudo-classes are special effects for adding selectors.
Because the state change is non-static, when an element reaches a specific state, it may get a pseudo-class style; A
s you can see, its functionality is somewhat similar to class, but it is based on abstractions outside the document, so it's called a pseudo-class.
The syntax of a pseudo-class:
selector:pseudo-class {property:value;}
CSS classes can also use pseudo-classes:
selector.class:pseudo-class {property:value;}
In CSS-supported browsers, the different states of the links can be displayed in different ways
Note: In the CSS definition, a:hover must be placed after a:link and a:visited before it is valid.
Note: In the CSS definition, a:active must be placed after a:hover before it is valid.
Note: The name of the pseudo-class is not case sensitive.
Pseudo-classes can be used with CSS classes:
a.red:visited {color:#FF0000;}
<a class="red" href="css-syntax.html">CSS Syntax</a>
If the link to the example above has been accessed, it will appear in red.
You can use the :first-child pseudo-class to select the first child element of an element
Note: Previous versions of IE8 must state that the DOCTYPE, so that :first-child can take effect.
In the following example, the selector matches the element as the first child of any element:
In the following example, select the first of all the elements that match the one:
In the following example, the selector matches all of the elements that are the first child of the element:
:lang pseudo-classes give you the ability to define special rules for different languages
Note: I E8 must state that the D OCTYPE; Lang pseudo-class.
In the following example, the lang class defines the type of quotation marks for a q element with a property value of no:
Add different styles to hyperlinks
This example shows how to add additional styles to hyperlinks.
Use :focus
This example shows how to use the :focus pseudo-class.
Selector | Example | Example description |
---|---|---|
:link | a:link | Select all unresoled links |
:visited | a:visited | Select all the links you've visited |
:active | a:active | Select the active link |
:hover | a:hover | The status of the mouse on the link |
:focus | input:focus | The element is selected to have focus after input |
:first-letter | p:first-letter | Select the first letter of each element |
:first-line | p:first-line | Select the first line of each element |
:first-child | p:first-child | The selector matches the element of the first child element that belongs to any element |
:before | p:before | Insert content before each element |
:after | p:after | Insert the content after each element |
:lang( language ) | p:lang(it) | Select a start value for the lang property of the element |
CSS Pick-Up Series: Talk about pseudo-elements and pseudo-classes in CSS