Scribd
Upload
49 views

Class # Id : Element Element, Element Element Element Element

This document describes CSS selectors and provides examples of common selector types including element selectors, class selectors, ID selectors, attribute selectors, pseudo-classes, child combinators, and more. Each selector is listed along with a brief example and description of what elements or attributes it selects. Selectors allow targeting specific elements on a page for styling.

Uploaded by

Veena Devi
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
49 views

Class # Id : Element Element, Element Element Element Element

This document describes CSS selectors and provides examples of common selector types including element selectors, class selectors, ID selectors, attribute selectors, pseudo-classes, child combinators, and more. Each selector is listed along with a brief example and description of what elements or attributes it selects. Selectors allow targeting specific elements on a page for styling.

Uploaded by

Veena Devi
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

http://sauceio.com/index.

php/tag/css-selectors/
Selector

Example

Example Description

.class

.intro

Selects all elements with class="intro"

#id

#firstname

Selects the element with id="firstname"

Selects all elements

element

Selects all <p> elements

element,element

div,p

Selects all <div> elements and all <p> elements

element element

div p

Selects all <p> elements inside <div> elements

element>element

div>p

Selects all <p> elements where the parent is a <div>


element

element+element

div+p

Selects all <p> elements that are placed immediately


after <div> elements

[attribute]

[target]

Selects all elements with a target attribute

[attribute=value]

[target=_blank]

Selects all elements with target="_blank"

[attribute~=value]

[title~=flower]

Selects all elements with a title attribute containing


the word "flower"

[attribute|=value]

[lang|=en]

Selects all elements with a


lang attribute value starting with "en"

:link

a:link

Selects all unvisited links

:visited

a:visited

Selects all visited links

:active

a:active

Selects the active link

:hover

a:hover

Selects links on mouse over

:focus

input:focus

Selects the input element which has focus

:first-letter

p:first-letter

Selects the first letter of every <p> element

:first-line

p:first-line

Selects the first line of every <p> element

:first-child

p:first-child

Selects every <p> element that is the first child of its


parent

:before

p:before

Insert content before the content of every <p> element

:after

p:after

Insert content after every <p> element

:lang(language)

p:lang(it)

Selects every <p> element with a


lang attribute equal to "it" (Italian)

element1~element
2

p~ul

Selects every <ul> element that are preceded by a <p>


element

[attribute^=value]

a[src^="https"]

Selects every <a> element


whose src attribute value begins with "https"

[attribute$=value]

a[src$=".pdf"]

Selects every <a> element


whose src attribute value ends with ".pdf"

[attribute*=value]

a[src*="w3schools"] Selects every <a> element whose src attribute value


contains the substring "w3schools"

:first-of-type

p:first-of-type

Selects every <p>


element that is the first <p> element of its parent

:last-of-type

p:last-of-type

Selects every <p>


element that is the last <p> element of its parent

:only-of-type

p:only-of-type

Selects every <p>


element that is the only <p> element of its parent

:only-child

p:only-child

Selects every <p>


element that is the only child of its parent

:nth-child(n)

p:nth-child(2)

Selects every <p>


element that is the second child of its parent

: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

:nth-of-type(n)

p:nth-of-type(2)

Selects every <p> element


that is the second <p> element of its parent

:nth-last-of-type(n)

p:nth-last-oftype(2)

Selects every <p> element that


is the second <p> element of its parent,
counting from the last child

:last-child

p:last-child

Selects every <p> element that is


the last child of its parent

:root

:root

Selects the document's root element

:empty

p:empty

Selects every <p> element


that has no children (including text nodes)

:target

#news:target

Selects the current


active #news element (clicked on a
URL containing that anchor name)

:enabled

input:enabled

Selects every enabled <input> element

:disabled

input:disabled

Selects every disabled <input> element

:checked

input:checked

Selects every checked <input> element

:not(selector)

:not(p)

Selects every element that is not a <p> element

::selection

::selection

Selects the portion of an element that is selected by a user

You might also like