Scribd
Upload
72 views

Css Selectors

CSS selectors are patterns used to select and style elements in CSS. There are many different types of selectors including element selectors to select elements by name, class selectors to select elements with a certain class, ID selectors to select elements with a specific ID, and attribute selectors to select elements by attributes or attribute values. CSS selectors also allow selection by pseudo-classes like link states (:link, :visited, etc.), positional relationships between elements like :first-child, and selection of content like :first-letter. New CSS versions have introduced additional selector types including selectors by language, beginning or end of attributes, and more complex selectors by child and type.

Uploaded by

Talha Sheikh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
72 views

Css Selectors

CSS selectors are patterns used to select and style elements in CSS. There are many different types of selectors including element selectors to select elements by name, class selectors to select elements with a certain class, ID selectors to select elements with a specific ID, and attribute selectors to select elements by attributes or attribute values. CSS selectors also allow selection by pseudo-classes like link states (:link, :visited, etc.), positional relationships between elements like :first-child, and selection of content like :first-letter. New CSS versions have introduced additional selector types including selectors by language, beginning or end of attributes, and more complex selectors by child and type.

Uploaded by

Talha Sheikh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

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).
Selector

Example

Example description

.class
#id
*
element
element,element
element element
element>element
element+element

.intro

Selects all elements with class="intro"

CSS
1

#firstname

Selects the element with id="firstname"

Selects all elements

Selects all <p> elements

div,p

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

div p

Selects all <p> elements inside <div> elements

div>p

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

div+p

[attribute]
[attribute=value]
[attribute~=value]

[target]

Selects all <p> elements that are placed immediately after <div>
elements
Selects all elements with a target attribute

[target=_blank]

Selects all elements with target="_blank"

[title~=flower]

Selects all elements with a title attribute containing the word "flower"

[attribute|=value]
:link
:visited
:active
:hover
:focus
:first-letter
:first-line
:first-child
:before
:after
:lang(language)

[lang|=en]

Selects all elements with a lang attribute value starting with "en"

a:link

Selects all unvisited links

a:visited

Selects all visited links

a:active

Selects the active link

a:hover

Selects links on mouse over

input:focus

Selects the input element which has focus

p:first-letter

Selects the first letter of every <p> element

p:first-line

Selects the first line of every <p> element

p:first-child

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

p:before

Insert content before the content of every <p> element

p:after

Insert content after every <p> element

p:lang(it)

Selects every <p> element with a lang attribute equal to "it" (Italian)

element1~element2
[attribute^=value]

p~ul

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

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"]

:first-of-type

p:first-of-type

Selects every <a> element whose src attribute value contains the
substring "w3schools"
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
:nth-child(n)
:nth-last-child(n)

p:only-child

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

p:nth-child(2)

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

p:nth-last-child(2)

:nth-of-type(n)

p:nth-of-type(2)

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

:nth-last-of-type(n)

p:nth-last-of-type(2)

:last-child
:root
:empty

p:last-child

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

:root

Selects the document's root element

p:empty

Selects every <p> element that has no children (including text nodes)

:target

#news:target

:enabled
:disabled
:checked
:not(selector)
::selection

input:enabled

Selects the current active #news element (clicked on a URL containing


that anchor name)
Selects every enabled <input> element

input:disabled

Selects every disabled <input> element

input:checked

Selects every checked <input> element

:not(p)

Selects every element that is not a <p> element

::selection

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

You might also like