CSS Selectors
In CSS, selectors are patterns used to select the element(s) you want to style.The "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2).
Selector | Example | Example description | CSS |
---|---|---|---|
.class | .intro | Selects all elements with class="intro" | 1 |
#id | #firstname | Selects the element with id="firstname" | 1 |
* | * | Selects all elements | 2 |
element | p | Selects all <p> elements | 1 |
element,element | div,p | Selects all <div> elements and all <p> elements | 1 |
element element | div p | Selects all <p> elements inside <div> elements | 1 |
element>element | div>p | Selects all <p> elements where the parent is a <div> element | 2 |
element+element | div+p | Selects all <p> elements that are placed immediately after <div> elements | 2 |
[attribute] | [target] | Selects all elements with a target attribute | 2 |
[attribute=value] | [target=_blank] | Selects all elements with target="_blank" | 2 |
[attribute~=value] | [title~=flower] | Selects all elements with a title attribute containing the word "flower" | 2 |
[attribute|=language] | [lang|=en] | Selects all elements with a lang attribute value starting with "en" | 2 |
:link | a:link | Selects all unvisited links | 1 |
:visited | a:visited | Selects all visited links | 1 |
:active | a:active | Selects the active link | 1 |
:hover | a:hover | Selects links on mouse over | 1 |
:focus | input:focus | Selects the input element which has focus | 2 |
:first-letter | p:first-letter | Selects the first letter of every <p> element | 1 |
:first-line | p:first-line | Selects the first line of every <p> element | 1 |
:first-child | p:first-child | Selects every <p> elements that is the first child of its parent | 2 |
:before | p:before | Insert content before every <p> element | 2 |
:after | p:after | Insert content after every <p> element | 2 |
:lang(language) | p:lang(it) | Selects every <p> element with a lang attribute value starting with "it" | 2 |
No comments:
Post a Comment