CSS Selector with Example

[attribute=value]

[for="email"]

All elements with a for="email" attribute

[attribute^=value]

button[value^="Go"]

All <button> elements whose value attribute starts with "Go"

[attribute$=value]

img[src$=".png"]

All <img> elements whose src attribute ends with ".jpg"

[attribute*=value]

img[alt*="Computer"]

All <a> elements whose alt attribute contains the substring "Computer"

[attribute~=value]

[title~=create]

All elements whose title attribute contains the word "create", delimited by spaces.

[attribute|=value]

[lang|=nl]

All elements whose lang attribute is a hyphen-separated list starting with "nl" or "nl-"

:active

a:active

All active links

:visited

a:visited

All visited links

:link

a:link

All unvisited links

::after

ul::after

Add cosmetic content after each <ul> element

::before

ul::before

Add cosmetic content before each <ul> element

:checked

input:checked

All <input> elements that are checked

:default

input:default

All <input> elements that are specified as default

:enabled

input:enabled

All <input> elements that are enabled

:disabled

input:disabled

All <input> elements that are disabled

:valid

input:valid

All <input> input elements with a valid value

:invalid

input:invalid

All <input> elements with an invalid value

:in-range

input:in-range

All <input> elements with a value that is within a specified range

:out-of-range

input:out-of-range

All <input> elements with a value outside the specified range

:indeterminate

input:indeterminate

All <input> elements that are in an indeterminate state

:required

input:required

All <input> elements with a "required" attribute

:optional

input:optional

All <input> elements with no "required" attribute

:read-only

input:read-only

All <input> elements with a "readonly" attribute

:read-write

input:read-write

All <input> elements without a "readonly" attribute

::placeholder

input::placeholder

All <input> elements with placeholder text

:hover

input:hover

The <input> element that currently being hovered

:focus

input:focus

The <input> element that currently has focus

:empty

ol:empty

All <ol> element without child elements

:first-child

li:first-child

All <li> elements that are the first child of their parent

:last-child

li:last-child

All <li> elements that are the last child of their parent

:nth-child(n)

li:nth-child(2)

All <li> elements that are second child of their parent

:nth-last-child(n)

li:nth-last-child(2)

All <li> elements that are second to last child of their parent

:only-child

li:only-child

All <li> elements that are the only child of its parent

:first-of-type

label:first-of-type

All <label> elements that are the first label of their parent

:last-of-type

label:last-of-type

All <label> elements that are the last label of their parent

:nth-of-type(n)

label:nth-of-type(2)

All <label> elements that are the second label of their parent

:nth-last-of-type(n)

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

All <label> elements that are the second to last label of their parent

:only-of-type

label:only-of-type

All <label> elements that are the only label element of their parent

::first-letter

p::first-letter

The first letter of every <p> element

::first-line

p::first-line

The first line of every <p> element

:lang(language)

p:lang(bn)

All Bangla <p> elements

:not(selector)

:not(table)

All elements that are not a <table> element

:root

:root

The document’s root element

::selection

::selection

Parts of an element that is selected (highlighted) by the user — usually text

:target

:target

The element that matches the url fragment, e.g. element with id="list" when the url is hmtmcse.com#list.