Showing posts with label CSS Selector Reference. Show all posts
Showing posts with label CSS Selector Reference. Show all posts

Tuesday, August 21, 2012

CSS Selector Reference


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, CSS2, or CSS3).

SelectorExampleExample descriptionCSS
.class.introSelects all elements with class="intro"1
#id#firstnameSelects the element with id="firstname"1
**Selects all elements2
elementpSelects all <p> elements1
element,elementdiv,pSelects all <div> elements and all <p> elements1
element elementdiv pSelects all <p> elements inside <div> elements1
element>elementdiv>pSelects all <p> elements where the parent is a <div> element2
element+elementdiv+pSelects all <p> elements that are placed immediately after <div> elements2
[attribute][target]Selects all elements with a target attribute2
[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|=value][lang|=en]Selects all elements with a lang attribute value starting with "en"2
:linka:linkSelects all unvisited links1
:visiteda:visitedSelects all visited links1
:activea:activeSelects the active link1
:hovera:hoverSelects links on mouse over1
:focusinput:focusSelects the input element which has focus2
:first-letterp:first-letterSelects the first letter of every <p> element1
:first-linep:first-lineSelects the first line of every <p> element1
:first-childp:first-childSelects every <p> element that is the first child of its parent2
:beforep:beforeInsert content before  the content of every <p> element2
:afterp:afterInsert content after every <p> element2
:lang(language)p:lang(it)Selects every <p> element with a lang attribute value starting with "it"2
element1~element2p~ulSelects every <ul> element that are preceded by a <p> element3
[attribute^=value]a[src^="https"]Selects every <a> element whose src attribute value begins with "https"3
[attribute$=value]a[src$=".pdf"]Selects every <a> element whose src attribute value ends with ".pdf"3
[attribute*=value]a[src*="w3schools"]Selects every <a> element whose src attribute value contains the substring "w3schools"3
:first-of-typep:first-of-typeSelects every <p> element that is the first <p> element of its parent3
:last-of-typep:last-of-typeSelects every <p> element that is the last <p> element of its parent3
:only-of-typep:only-of-typeSelects every <p> element that is the only <p> element of its parent3
:only-childp:only-childSelects every <p> element that is the only child of its parent3
:nth-child(n)p:nth-child(2)Selects every <p> element that is the second child of its parent3
: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 child3
:nth-of-type(n)p:nth-of-type(2)Selects every <p> element that is the second <p> element of its parent3
: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 child3
:last-childp:last-childSelects every <p> element that is the last child of its parent3
:root:rootSelects the document’s root element3
:emptyp:emptySelects every <p> element that has no children (including text nodes)3
:target#news:targetSelects the current active #news element (clicked on a URL containing that anchor name)3
:enabledinput:enabledSelects every enabled <input> element3
:disabledinput:disabledSelects every disabled <input> element3
:checkedinput:checkedSelects every checked <input> element3
:not(selector):not(p)Selects every element that is not a <p> element3
::selection::selectionSelects the portion of an element that is selected by a user3