Shulou(Shulou.com)06/01 Report--

This article mainly explains "what are the useful CSS pseudo selectors". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the useful CSS pseudo selectors".

1.:: first-line | Select the first line of text

This pseudo-element selector selects the first line of the text before wrapping.

P:first-line {

Color: lightcoral

}

2.:: first-letter | Select the initials

This pseudo-element selector is applied to the first letter of the text in the element.

.innerDiv p:first-letter {

Color: lightcoral

Font-size: 40px

}

3.:: selection | Select the highlighted (selected) area

Applies to any highlighted area selected by the user. With the:: selection pseudo-element selector, we can apply styles to highlighted areas.

Div::selection {

Background: yellow

}

4.: root | Root element

The root pseudo-class selects the root element of the document. In HTML, the HTML element. In RSS, it is the RSS element. This pseudo-class selector is applied to the root element and is often used to store global CSS custom attributes.

5.: empty | triggered only when the element is empty

This pseudo-class selector will select elements that do not have any children. The element must be empty. If an element has no spaces, visible content, descendant elements, it is an empty element.

Div:empty {

Border: 2px solid orange

}

This rule will apply to empty div elements. This rule will apply to the first and second div because they are true and empty, while the third div contains spaces.

6.: only-child | Select the only child element

Matches child elements that do not have any sibling elements in the parent element.

.innerDiv p:only-child {

Color: orangered

}

7.: first-of-type | Select the first child element of the specified type

.innerDiv p:first-of-type {

Color: orangered

}

This applies to the first p element under .innerDiv.

Div1

These are the necessary steps

Hiya

Do not push the brake at the same time as the accelerator.

Div2

This p ("These are the necessary step") will be selected.

8.: last-of-type | Select the last child element of the specified type

Like: first-of-type, but will apply to the last child element of the same type.

.innerDiv p:last-of-type {

Color: orangered

}

This applies to the last p paragraph element under innerDiv.

These are the necessary steps

Hiya

Div1

Do the same.

Div2

Therefore, the p element ("Do the same") will be selected.

9.: nth-of-type () | Select a specific type of child element

This selector will select some type of child element from the list of children of the specified parent element.

.innerDiv p:nth-of-type (1) {

Color: orangered

}

10.: nth-last-of-type () | Select the child elements of the specified type at the end of the list

This selects the last child element of the specified type.

.innerDiv p:nth-last-of-type () {

Color: orangered

}

This selects the last paragraph type child element contained in the innerDiv list element.

These are the necessary steps

Hiya

Div1

Do the same.

Div2

The last paragraph sub-element p ("Do the same") in the innerDiv will be selected.

11.: link | Select an unvisited hyperlink

This selector applies to links that have not been accessed. It is commonly used for an anchor element with a href attribute.

A:link {

Color: orangered

}

Login

This will select the an anchor element that has not been clicked on the specified interface with href, and the text in the selected element will be displayed in orange.

12.: checked | Select a selected check box

This applies to check boxes that have been selected.

Input:checked {

Border: 2px solid lightcoral

}

This rule applies to all selected check boxes.

13.: valid | Select an element that has passed verification

This is mainly used to visualize form elements so that users can determine whether they are validated or not. When validation passes, the default element has a valid attribute.

Input:valid {

Boder-color: lightsalmon

}

14.: invalid | Select an element that fails verification

Like: valid, but applies to elements that have not been validated.

Input [type= "text"]: invalid {

Border-color: red

}

15.: lang () | Select the elements of the specified language

Applies to elements that specify a language. You can use it in two ways:

P:lang (fr) {

Background: yellow

}

Or

P [lang | = "fr"] {

Background: yellow

}

Paragraph 1

16.: not () | reverse for selection (this is an operator)

Negate the pseudo-class selector and select the opposite. Let's look at an example:

.innerDiv: not (p) {

Color: lightcoral

}

Paragraph 1

Paragraph 2

Div 1

Paragraph 3

Div 2

Div 1 and Div 2 are selected because they are not p elements.

Thank you for your reading, these are the contents of "what are the useful CSS pseudo selectors". After the study of this article, I believe you have a deeper understanding of what the useful CSS pseudo selectors have, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.