CSS selectors
CSS selectors are used to select the elements you want to style pattern.
"CSS" column indicates in which CSS properties defined (CSS1, CSS2, or CSS3).
| Selector | Example | Example shows | CSS |
|---|---|---|---|
| . Class | .intro | Select all the class = "intro" element | 1 |
| # Id | #firstname | Select all the id = "firstname" elements | 1 |
| * | * | Select all the elements | 2 |
| element | p | Select all <p> elements | 1 |
| element, element | div,p | Select all the <div> element and the <p> element | 1 |
| element element | div p | Select <div> all <p> elements within the element | 1 |
| element> element | div>p | Select all the parent is a <div> element of the <p> element | 2 |
| element + element | div+p | Select <p> element followed by all <div> elements after | 2 |
| [Attribute] | [target] | Select all the elements with the target attribute | 2 |
| [Attribute = value] | [target=-blank] | Select all use target = - element "blank" of | 2 |
| [Attribute ~ = value] | [title~=flower] | Select all the elements of the title attribute contains the word "flower" of | 2 |
| [Attribute | = language] | [lang|=en] | Select all the elements of a lang attribute start value = "EN" of | 2 |
| : link | a:link | Select all unvisited links | 1 |
| : visited | a:visited | Select all visited links | 1 |
| : active | a:active | Select the active link | 1 |
| : hover | a:hover | When you select the mouse on the link above | 1 |
| : focus | input:focus | Select the input element has focus | 2 |
| : first-letter | p:first-letter | Select the first letter of each <P> element | 1 |
| : first-line | p:first-line | Select each <P> The first line element | 1 |
| : first-child | p:first-child | Specified only when <p> element is the first child of its parent style. | 2 |
| : before | p:before | Insert content before each <p> element | 2 |
| : after | p:after | Insert content after each <p> element | 2 |
| : lang (language) | p:lang(it) | Select a lang attribute start value = "it" all <p> elements | 2 |
| element1 ~ element2 | p ~ ul | Each choice p ul element after element | 3 |
| [Attribute ^ = value] | a [src ^ = "https"] | Select each src attribute value to "https" at the beginning of the element | 3 |
| [Attribute $ = value] | a [src $ = ". pdf"] | Select each src attribute value to ".pdf" at the end of the element | 3 |
| [Attribute * = value] | a [src * = "w3big"] | Select each element src attribute value contains the substring "w3big" of | 3 |
| : first-of-type | p: first-of-type | Select each p p element is the first element of its parent | 3 |
| : last-of-type | p: last-of-type | Select each p element is the last element of its parent p | 3 |
| : only-of-type | p: only-of-type | Select each p element is the only element of its parent p | 3 |
| : only-child | p: only-child | Select each p element is the only child element of its parent | 3 |
| : nth-child (n) | p: nth-child (2) | Select each p element is the second child of its parent | 3 |
| : nth-last-child (n ) | p: nth-last-child (2) | Select each p element is the second child of its parent, counting from the last child | 3 |
| : nth-of-type (n ) | p: nth-of-type (2) | Select each p element is the second p element of its parent | 3 |
| : nth-last-of-type (n) | p: nth-last-of-type (2) | Select each p element is the second p element of its parent, counting from the last child | 3 |
| : last-child | p: last-child | Select each p element is the last child of its parent. | 3 |
| : root | : Root | Select the root element of the document | 3 |
| : empty | p: empty | Select each of the p element has no children (including text nodes) | 3 |
| : target | #news: target | Select the currently active #news element (including the anchor name clickable URL) | 3 |
| : enabled | input: enabled | Select each input element enabled | 3 |
| : disabled | input: disabled | Selecting each input element disabled | 3 |
| : checked | input: checked | Select each selected input element | 3 |
| : not (selector) | : Not (p) | Select each element is not p elements | 3 |
| :: selection | :: Selection | Element is selected or highlighted in the state of the user partial match | 3 |
| : out-of-range | : Out-of-range | Matching value input element outside the specified range | 3 |
| : in-range | : In-range | Matching value input element within the specified range of the | 3 |
| : read-write | : Read-write | It used to match readable and writable element | 3 |
| : read-only | : Read-only | For matching set "readonly" (read-only) attribute element | 3 |
| : optional | : Optional | For matching optional input element | 3 |
| : required | : Required | Set up to match the element "required" property | 3 |
| : valid | : Valid | Used to match the input value is a legitimate element | 3 |
| : invalid | : Invalid | Illegal value for the input element matches | 3 |