Scribd
Upload
66 views3 pages

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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
66 views3 pages

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
We take content rights seriously. If you suspect this is your content, claim it here.
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