CSS Selectors

CSS selectors are patterns used to select the element(s) you want to style.

Here are almost all CSS2 and 3 selectors, and the CSS3 UI selectors (mostly structural pseudo-classes).

Selector Selector Example Selector Description Browser Support Try Yourself
* * Selects all elements
Try Yourself
#id #myName Selects the element with id="myName"
Try Yourself
.class .myProfile Selects all elements with class="myProfile"
Try Yourself
element element div span Selects all <span> elements inside <div> elements
Try Yourself
element div Selects all <div> elements
Try Yourself
:link a:link Selects all unvisited links
Try Yourself
element > element div > ul Selects all <ul> elements where the parent is a <div> element
Try Yourself
element1~element2 div~ul Selects every <ul> element that are preceded by a <p> element
Try Yourself
:hover a:hover Selects links on mouse over
Try Yourself
:after a:after Insert content after every <a> element
Try Yourself
:not(selector) :not(p) Selects every element that is not a <p> element
Try Yourself
::selection ::selection Selects the portion of an element that is selected by a user
Try Yourself
:first-letter p:first-line Selects the first line of every <p> element
Try Yourself
:first-line p:first-line Selects the first line of every <p> element
Try Yourself
:first-child ul li:first-child Selects every <ul><li> element that is the first child of its parent
Try Yourself
:last-child ul li:last-child Selects every <ul><li> element that is the last child of its parent
Try Yourself
:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent
Try Yourself
:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child
Try Yourself
:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent
Try Yourself
:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last child
Try Yourself
:disabled input:disabled Selects every disabled <input> element
Try Yourself
:enabled input:disabled Selects every enabled <input> element
Try Yourself
:target #target:target Selects the current active #news element (clicked on a URL containing that anchor name)
Try Yourself
:empty div:empty Selects every <div> element that has no children (including text nodes)
Try Yourself
:root :root Selects the document´┐Żs root element
Try Yourself
:only-child p:only-child Selects every <p> element that is the only child of its parent
Try Yourself
:only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent
Try Yourself
:last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent
Try Yourself
:first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent
Try Yourself
[attribute^=value] div[class^="text"] Selects every <div> element whose src attribute value begins with "text"
Try Yourself
[attribute*=value] div[class*="text"] Selects every <div> element whose src attribute value contains the substring "text"
Try Yourself
[attribute$=value] div[class$="text"] Selects every <div> element whose src attribute value ends with "text"
Try Yourself
[attribute] a[target] Selects all elements with a target attribute
Try Yourself
[attribute~=value] [title~=google] Selects all elements with a title attribute containing the word "flower"
Try Yourself
[attribute=value] a[target=_blank] Selects all elements with target="_blank"
Try Yourself
:focus input:focus Selects the input element which has focus
Try Yourself
:lang(language) p:lang(it) Selects every <p> element with a lang attribute equal to "it" (Italian)
Try Yourself
:before a:before Insert content before the content of every <p> element
Try Yourself
:active a:active Selects the active link
Try Yourself
element,element div,p Selects all <div> elements and all <p> elements
Try Yourself
  • Share
  • Copyright 2016 by WebiBeris.com. All Rights Reserved.