CSS Selector Syntax Reference manual

Source: Internet
Author: User

Transferred from: http://www.w3school.com.cn/cssref/css_selectors.asp

CSS3 Selector

In CSS, a selector is a pattern that selects the elements that need to be added to a style.

The CSS column indicates which version of the CSS the property is defined in. (CSS1, CSS2 or CSS3. )

Selector
SelectorExample Example Description CSS
. class . intro Select all elements of class= "Intro". 1
#ID #firstname Select all elements of id= "FirstName". 1
* * Selects all elements. 2
Element P Select all <p> elements. 1
element,element Div,p Select all <div> elements and all <p> elements. 1
element element Div p Select all <p> elements inside the <div> element. 1
element>element Div>p Selects all <p> elements of the parent element for the <div> element. 2
element+element Div+p Select all <p> elements immediately after the <div> element. 2
[attribute] [Target] Selects all elements with the target property. 2
[attribute=value] [Target=_blank] Select all elements of target= "_blank". 2
[attribute~=value] [Title~=flower] Select all elements of the title property that contain the word "flower". 2
[attribute|=value] [Lang|=en] Select all elements with the Lang attribute value beginning with "en". 2
: Link A:link Select all links that have not been accessed. 1
: Visited a:visited Select all links that have been visited. 1
: Active A:active Select the active link. 1
: hover A:hover Select the link on which the mouse pointer is located. 1
: Focus Input:focus Select the input element that gets the focus. 2
: First-letter P:first-letter Select the first letter of each <p> element. 1
: First-line P:first-line Select the first line of each <p> element. 1
: First-child P:first-child Select each <p> element that belongs to the first child element of the parent element. 2
: Before P:before Insert content before the contents of each <p> element. 2
: After P:after Insert content after each <p> element's content. 2
: lang (language) P:lang (IT) Select each <p> element with a value for the lang attribute that starts with "it". 2
element1~element2 P~ul Select each <ul> element that has a <p> element in front of it. 3
[attribute^=value] a[src^= "https"] Select each <a> element whose src attribute value begins with "https". 3
[attribute$=value] A[src$= ". pdf"] Select all <a> elements whose src attribute ends with ". pdf". 3
[attribute*=value] a[src*= "ABC"] Select each <a> element that contains the "ABC" substring in its src attribute. 3
: First-of-type P:first-of-type Select each <p> element that belongs to the first <p> element of its parent element. 3
: Last-of-type P:last-of-type Select each <p> element that belongs to the last <p> element of its parent element. 3
: Only-of-type P:only-of-type Select each <p> element that belongs to the <p> element that is unique to its parent element. 3
: Only-child P:only-child Selects each <p> element that belongs to the unique child element of its parent element. 3
: Nth-child (n) P:nth-child (2) Selects each <p> element that belongs to the second child element of its parent element. 3
: Nth-last-child (n) P:nth-last-child (2) Ditto, counting from the last child element. 3
: Nth-of-type (n) P:nth-of-type (2) Select each <p> element that belongs to the second <p> element of its parent element. 3
: Nth-last-of-type (n) P:nth-last-of-type (2) Ditto, but starts counting from the last child element. 3
: Last-child P:last-child Select each <p> element that belongs to the last child element of its parent element. 3
: Root : Root Select the root element of the document. 3
: Empty P:empty Select each <p> element that has no child elements (including text nodes). 3
: Target #news: Target Select the currently active #news element. 3
: Enabled Input:enabled Select each of the enabled <input> elements. 3
:d isabled Input:disabled Select each of the disabled <input> elements 3
: Checked Input:checked Select each <input> element that is selected. 3
: Not (selector) : Not (P) Select each element of the non-<p> element. 3
:: Selection :: Selection Select the part of the element that is selected by the user. 3

CSS selector Syntax reference manual

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.