CSS selector details

Selector is the core of CSS. It evolved from the initial element, class/id selector to pseudo element, pseudo class, and richer selector provided in CSS3, locating any element on the page becomes increasingly simple.

1. Element Selector

This is the most basic CSS selector. The elements in the HTML document itself are a selector:

p {line-height:1.5em; margin-bottom:1em;}

2. Relationship Selector

E f: descendant selector, which locates all the elements F in the descendant of Element E:

ul li {margin-bottom:0.5em;}

E> F: Child selector, which locates all the elements F in the direct child element of Element E, and ignores any further nesting:

Ul> li {list-style: none;} // only the direct sub-element li of ul. If another ul structure is nested in li, the li in the innermost part will be ignored.

E + F: adjacent sibling selector. This selector locates element F that has the same parent element as Element E and is adjacent to Element E in the tag:

Li + li {border-top: 1px solid # ddd;} // locate all li addresses with the same parent element ul except the first li

E ~ F: Common sibling selector. This selector locates all elements F that have the same parent element as Element E and are located after Element E in the tag:

H1 ~ P {color: # f00;} // locate all p tags with the same parent element after the h1 tag

 

3. Attribute Selector

E [attr]: This selector locates any element with the attr attribute. E:

Input [required] {border: 1px solid # f00;} // locate all inputs with the required attribute "required" on the page.

E [attr = val]: This selector locates any element E with the attr attribute and the attribute value is val:

Input [type = password] {border: 1px solid # aaa;} // locate the password input box on the page

E [attr | = avl]: This selector locates any element E that has the attr attribute and the attribute value is val or starts with val:

P [class | = a] {color: #333;} // locate all P paragraphs on the page that have the class attribute and the attribute value is a or, for example, class = "a" and class = "a-B"

E [attr ~ = Val]: This selector locates any element E with the attr attribute and the attribute value is the complete word val:

Div [title ~ = English] {color: # f88;} // locate all div containers with the attribute title and the attribute value containing the complete word english on the page, for example, title = "english" and title = "a english"

E [attr ^ = val]: This selector locates any element E that has the attr attribute and has the attribute value starting with val:

Div [class ^ = a] {color: #666;} // locate the div container with the attribute class and the attribute value starting with a on the page, for example, class = "a" and class = "AB"

E [attr $ = val]: This selector is opposite to E [attr ^ = val]. It locates any element E that has an attribute attr and Its Attribute Value ends with a val:

Div [class $ = a] {color: # f00;} // locate the div window with an Attribute class ending with a property value in the page, for example, class = "nba" and class = "CBA"

E [attr * = val]: This selector corresponds to E [attr ~ = Val] similar, but further, locate the element E that has the attr attribute and contains the val at any position of the attribute value. val can be a complete word or a part of a word:

A [title * = link] {text-decoration: underline;} // locate a link with a link string in all the titles

4. pseudo class

: Link: unaccessed link;

: Visited: The accessed link. It is not recommended;

: Hover: move the cursor to the container, not limited to links. It can be used for any elements on the page;

: Active: the status when activated, not limited to links, can be used for any element with the tabindex attribute;

: Focus: The status when the focus is obtained, not limited to links. It can be used for any wireless devices with the tabindex attribute:

Input: focus {border: 1px solid #333;} // The style when the input box gets the focus

: Enabled interface elements:

input:enabled {border:1px solid #899;}

: Disabled interface elements:

input:disabled {background:#eee;}

: Target: This selector locates the target element of the positioning point on the current activity page:

# Info: target {font-size: 24px;} // when the accessed URL is 123.html # info, id = "info" loads the font Style

: Default: applies to one or more UI elements that act as default elements in a group of similar elements;

: Valid: Apply to valid elements:

Input: valid {border: 1px solid #6a6;} // load the border style when the input box is verified to be valid, based on the type or pattern attribute

: Invalid: mandatory element applied to null, and element that fails to match the requirement defined by the type or pattern attribute:

Input: invalid {border: 1px solid # f00;} // load this border style when the input box is blank and required, or if it is filled but not validated

: In-range: applies to elements with range restrictions, where the value is within the limit; for example, the number and range input boxes with the min and max attributes;

Ut-of-range: opposite to: in-range, where this value is out of the limit;

: Required: Used in Form Controls with mandatory required attributes;

Ptional: applies to all form controls without the required attribute required

: Read-only: applies to elements that cannot be modified by users;

: Read-write: applies to elements whose content can be modified by users, such as input boxes;

: Root element, always html element;

E f: nth-child (n): This selector locates element F of the nth child element of Element E:

Div. class p: nth-child (3) {color: # f00;} // class = "class", the third element p in the div container. If the third child element is not p, this style will be invalid

E f: nth-last-child (n): This selector locates F, the nth child element of Element E;

E: nth-of-type (n): This selector locates the nth specified type child element of Element E;

E: nth-lash-of-type (n): This selector locates the nth specified type of child element of the derivative of Element E:

. Class p: nth-child (2) and. the difference between class p: nth-of-type (2) is that if. when 2nd child elements in the class are not P elements ,. class p: nth-child (2) style will be invalid, and. class p: nth-of-type (2) will be located in. the 2nd p elements in the class

Nth-child (n), nth-last-child (n), nth-of-type (n), nth-last-of-type (n ), here, n can be a digital static type, for example. nth-child (2n + 1) will match 1st, 3, 5... elements

E: first-child: the first child element E of the parent element, which is the same as nth-child (1;

E: last-child: the last child of the parent Element E;

E: first-of-type: Same as: nth-of-type (1;

E: last-of-type: Same as nth-last-of-type (1;

E: only-child: unique sub-element E in the parent element;

E: only-of-type: the unique E element in the parent element that has this type;

E: empty: elements without child elements, including text nodes;

E: lang (en): an element in a language abbreviated to en;

E: not (exception): This selector selects an element that does not match the selector in the brackets:

P: not (. info) {font-size: 12px;} // match all the p elements whose class value is not info

5. pseudo elements

The pseudo element can be used to locate the text contained in the document to distinguish it from the pseudo class. The pseudo element uses the double Colon: definition, but the single Colon: can also be recognized.

: First-line: match the first line of text;

: First-letter: match the first letter of the text;

: Before AND: after: Use the contnet attribute to generate additional content and insert it into the tag:

A [href ^ = http]: after {content: "link"} // insert a text link behind the link a on the page

: Selection: Match highlighted text:

: Selection {background: #444; color: # fff;} // defines the selected text color and background color.

Of course, if you want to easily use these powerful CSS selectors, use browsers like Chrome and Firefox. At least you have to discard IE versions earlier than IE9.