13th Chapter CSS Selector (bottom)

Chapter VII CSS selectors [ bottom ]

Learning Essentials:

1. pseudo-Class selector combo

2. structural pseudo-class selectors

3.UI Pseudo class selector

4. dynamic Pseudo-class selector

5. other pseudo-class selectors

This chapter mainly discusses The pseudo- class selectors in the CSS selector in HTML5, like pseudo-element selectors, target a common feature to select elements.

A Pseudo class Selector Combo

There are four types of pseudo-class selectors: Structural pseudo-class, UI Pseudo-class, dynamic Pseudo-class, and other pseudo-class selectors

Two Structural pseudo-Class selectors

The structural pseudo-class selector enables you to select elements based on their position in the document. This type of element has a prefix (:).

1. root element selector

: root {

border:1px solid red;

}

explanation: matching the root element in the document is not very basic, because the .

2. child element Selector

UL > Li:first-child {

color:red;

}

Explanation: Select the first child element.

UL > Li:last-child {

color:red;

}

Explanation: Select the last child element.

UL > Li:only-child {

color:red;

}

Explanation: Select the child element that has only one child element.

div > P:only-of-type {

color:red;

}

Explanation: Select the child element that has only one child element of the specified type.

3.:nth-child (n) Series

UL > Li:nth-child (2) {

color:red;

}

Explanation: Selects the second element of a child element.

UL > Li:nth-last-child (2) {

color:red;

}

Explanation: Select the second-to-last element of the child element.

div > P:nth-of-type (2) {

color:red;

};

Explanation: Select the second element of a specific child element.

div > P:nth-last-of-type (2) {

color:red;

};

Explanation: Selects the second-to-last element of a specific child element.

two. UI pseudo-class selector

The UI pseudo-class selector is a matching element based on the state of the element.

1.:enabled

: Enabled {

border:1px solid red;

}

Explanation: Select the enabled state element.

2.:d isabled

:d isabled {

border:1px solid red;

}

Explanation: Select the disabled state element.

3.:checked

: checked {

Display:none;

}

Explanation: Select the selected input element.

4.:d Efault

:d Efault {

Display:none;

}

Explanation: Select the default element from a set of similar elements. For example , input is checked, which is the default.

5.:valid and the : Invalid

Input:valid {

BORDER:1PX solid blue;

}

Input:invalid {

border:1px solid Green;

}

Explanation: Enter the elements that are selected when validating legitimate and illegal displays.

6.:required and the : Optional

input:required {

BORDER:1PX solid blue;

}

input:optional {

border:1px solid Green;

}

Explanation: Select an element based on whether it has a required attribute.

Three Dynamic Pseudo class Selector

The dynamic pseudo-class selector matches elements based on conditional changes.

1.:link and visited

a:link {

color:red;

}

a:visited {

Color:orange;

}

Explanation:: Link represents a hyperlink that has not been visited: visited represents a hyperlink that has been visited.

2.:hover

a:hover {

Color:blue;

}

Explanation: Indicates that the mouse hovers over the hyperlink.

3.:active

a:active {

Color:green;

}

Explanation: Indicates when the mouse is pressed to activate the hyperlink.

4.:focus

Input:focus {

border:1px solid red;

}

Explanation: Indicates when the focus is obtained.

Four Other pseudo-class selectors

1.:not

A:not ([href*= "Baidu"]) {

color:red;

}

Explanation: Negative selector, inverse selection.

2.:empty

: Empty {

Display:none;

}

Explanation: Matches elements that do not have any content.

3.:lang

: lang (en) {

color:red;

}

Explanation: Select the element that contains the lang attribute with the attribute value prefixed to en . Matches the result of the property selector.

4.:target

: Target {

color:red;

}

Explanation: When you navigate to an anchor point, select this element.

5.::selection

:: Selection {

color:red;

}

Explanation: This is a pseudo-element selector that triggers selection when text is selected. The selector under the CSS3 version.

<! DOCTYPE html>
<meta charset= "Utf-8" >
<TITLE>CSS Selector [Lower]</title>
<link rel= "stylesheet" type= "Text/css" href= "Style.css" >
<body>

<ul>
<li> I'm a son </li>
<li> I'm a son </li>
<li> I'm a son </li>
<li> I'm a son </li>
</ul>

<ul>
<li> I'm a son </li>
</ul>

<div>
<p> I am the paragraph </p>
<span> I'm not a paragraph </span>
</div>

<div>
<p> I am the paragraph </p>
<p> I am the paragraph </p>
</div>

<form>
<input type= "Text" required>
<input type= "Email" >

<input type= "checkbox" >
<input type= "checkbox" checked>

<button> Submit </button>

</form>

<a href= "http://www.baidu.com" > Baidu </a>
<a href= "http://www.google.com" > Google </a>
<a href= "http://www.haosou.com" > Good search </a>

<b> Bold </b>

<p lang= "en-US" >HTML5</p>

<b id= "Mytarget" > Bold </b>

</body>

@charset "Utf-8";

/*:root {
border:1px solid red;
}*/

/*ul > Li {
color:red;
}*/
/*ul > Li:first-child {
color:red;
}*/
/*li:first-child {
color:red;
}*/
/*:first-child {
color:red;
}*/
/* pseudo-classes need to be preceded by a selector to limit the range */
/*ul > Li:last-child {
color:red;
}*/
/*ul > Li:only-child {
color:red;
}*/
/*div > P:only-child {
color:red;
}*/
/*div > P:only-of-type {
color:red;
}*/
/*ul > Li:nth-child (2) {
color:red;
}*/
/*ul > Li:nth-last-child (2) {
color:red;
}*/
/*div > P:nth-of-type (2) {
color:red;
}*/
/*div > P:nth-last-of-type (1) {
color:red;
}*/
/*input:enabled {
border:1px solid red;
}
input:disabled {
BORDER:1PX solid blue;
}*/
/*input:checked {
Display:none;
}*/
/*input:default {
Display:none;
}*/
/*input:valid {
border:1px solid Green;
}
Input:invalid {
border:1px solid red;
}*/
/*input:required {
border:1px solid red;
}
input:optional {
BORDER:1PX solid blue;
}*/
/*a:link {
color:red;
}
a:visited {
Color:blue;
}
a:hover {
Color:orange;
}
a:active {
Color:green;
}*/

/*input:focus {
border:1px solid red;
}*/
/*a:not ([href*= "Baidu"]) {
color:red;
}*/
/*p:empty {
Display:none;
}*/
/*p:lang (en) {
color:red;
}*/
B:target {
color:red;
}
:: Selection {
color:red;
}

13th Chapter CSS Selector (bottom)