Selector	Example	Example description
:active	`a:active`	Selects the active link
:checked	`input:checked`	Selects every checked <input> element
:disabled	`input:disabled`	Selects every disabled <input> element
:empty	`p:empty`	Selects every <p> element that has no children
:enabled	`input:enabled`	Selects every enabled <input> element
:first-child	`p:first-child`	Selects every <p> elements that is the first child of its parent
:first-of-type	`p:first-of-type`	Selects every <p> element that is the first <p> element of its parent
:focus	`input:focus`	Selects the <input> element that has focus
:hover	`a:hover`	Selects links on mouse over
:in-range	`input:in-range`	Selects <input> elements with a value within a specified range
:invalid	`input:invalid`	Selects all <input> elements with an invalid value
:lang(language)	`p:lang(it)`	Selects every <p> element with a lang attribute value starting with "it"
:last-child	`p:last-child`	Selects every <p> elements that is the last child of its parent
:last-of-type	`p:last-of-type`	Selects every <p> element that is the last <p> element of its parent
:link	`a:link`	Selects all unvisited links
:not(selector)	`:not(p)`	Selects every element that is not a <p> element
: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-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 child
:nth-of-type(n)	`p:nth-of-type(2)`	Selects every <p> element that is the second <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
:optional	`input:optional`	Selects <input> elements with no "required" attribute
:out-of-range	`input:out-of-range`	Selects <input> elements with a value outside a specified range
:read-only	`input:read-only`	Selects <input> elements with a "readonly" attribute specified
:read-write	`input:read-write`	Selects <input> elements with no "readonly" attribute
:required	`input:required`	Selects <input> elements with a "required" attribute specified
:root	`root`	Selects the document’s root element
:target	`#news:target`	Selects the current active #news element (clicked on a URL containing that anchor name)
:valid	`input:valid`	Selects all <input> elements with a valid value
:visited	`a:visited`	Selects all visited links

Selector	Example	Example description
::after	`p::after`	Insert content after every <p> element
::before	`p::before`	Insert content before every <p> element
::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
::selection	`p::selection`	Selects the portion of an element that is selected by a user

Selector	Example	Example description
.class	`.intro`	Selects all elements with class=”intro”
.class1.class2	`.name1.name2`	Selects all elements with both name1 and name2 set within its class attribute
.class1 .class2	`.name1 .name2`	Selects all elements with name2 that is a descendant of an element with name1
#id	`#firstname`	Selects the element with id="firstname"
*	`*`	Selects all elements
element	`p`	Selects all <p> elements
element.class	`p.intro`	Selects all <p> elements with class="intro"
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 the first <p> element that is placed immediately after <div> elements
element1~element2	`p ~ ul`	Selects every <ul> element that is preceded by a <p> element
[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"
[attribute^=value]	`a[href^="https"]`	Selects every <a> element whose href attribute value begins with "https"
[attribute$=value]	`a[href$=".pdf"]`	Selects every <a> element whose href attribute value ends with ".pdf"
[attribute=value*]	`a[href*="w3schools"]`	Selects every <a> element whose href attribute value contains the substring "w3schools"
:active	`a:active`	Selects the active link
::after	`p::after`	Insert something after the content of each <p> element
::before	`p::before`	Insert something before the content of each <p> element
:checked	`input:checked`	Selects every checked <input> element
:default	`input:default`	Selects the default <input> element
:disabled	`input:disabled`	Selects every disabled <input> element
:empty	`p:empty`	Selects every <p> element that has no children (including text nodes)
:enabled	`input:enabled`	Selects every enabled <input> element
:first-child	`p:first-child`	Selects every <p> element that is the first child of its parent
::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-of-type	`p:first-of-type`	Selects every <p> element that is the first <p> element of its parent
:focus	`input:focus`	Selects the input element which has focus
:fullscreen	`:fullscreen`	Selects the element that is in full-screen mode
:hover	`a:hover`	Selects links on mouse over
:in-range	`input:in-range`	Selects input elements with a value within a specified range
:indeterminate	`input:indeterminate`	Selects input elements that are in an indeterminate state
:invalid	`input:invalid`	Selects all input elements with an invalid value
:lang(language)	`p:lang(it)`	Selects every <p> element with a lang attribute equal to "it" (Italian)
:last-child	`p:last-child`	Selects every <p> element that is the last child of its parent
:last-of-type	`p:last-of-type`	Selects every <p> element that is the last <p> element of its parent

Selector Name	Syntax	Description	Example
Universal Selector	``*	Selects all the elements	`* {color: pink; font-size: 20px;}`
Type Selector	`element {properties}`	Selects elements based on element type	`p {color: pink; font-size: 20px;}`
Id Selector	`#id {properties}`	Selects an element with a specified id	`#adbox {width: 80px; margin: 5px;}`
Class Selector	`.class {properties}`	Selects elements of the specified CSS class	`.dark {color: black;}`
Attribute Selectors
`element[attribute] {properties}`		Selects elements with the specified attribute	`input[disabled] {background-color: #fff;}`
`element[attribute="value"]`		Selects elements with the specified attribute equaling a value	`input[type="text"] {color: black;}`
`element[attribute~="value"]`		Selects elements with the specified attribute the value of which contains a specific word.	`h1[title~="Codota"] {color: pink; font-size: 20px;}`
`element[attribute\|="value"]`		Selects elements with the specified attribute and attribute value with the attribute beginning with specified value (or specified value immediately followed by “-“)	`a[hreflang\|="en"] {color: blue;}`
`element[attribute^="value"]`		Selects elements with the specified attribute with the attribute value starting with specified value	`h2[title^="Codota"] {color: black; font-size: 20px;}`
`element[attribute$="value"]`		Selects elements with the specified attribute with the attribute value ending with specified value	`h3[title$="Right Now!"] {color: red; font-size: 30px;}`
`element[attribute="value"]`*		Selects elements with the specified attribute where the attribute value contains a specified value	`h4[title*="new"] {color: red; font-size: 20px;}`
Descendant Combinator	`element1 element2 {properties}`	Selects all specified child descendant elements (element2) under the parent element (element1).	`div p {color:pink;}`
Child Combinator	`element1 > element2 {properties}`	Selects all specified immediate child elements (element2) under the parent element (element1).	`div > p {color:pink;}`
Pseudo Classes
`element:link {properties}`		Selects unvisited link elements	`a:link {color:blue;}`
`element:visited {properties}`		Selects visited link elements	`a:visited {color:red;}`
`element:active {properties}`		Selects active link elements	`a:active {color:green;}`
`element:hover {properties}`		Selects mouseover hover elements	`a:hover {color:purple;}`
`element:focus {properties}`		Selects in-focus elements	`a:focus {color:pink;}`

CSS Pseudo Selectors

All CSS Pseudo Classes

Alphabetical index

A

B

C

D

E

F

H

I

L

N

O

P

R

S

T

U

V

W

All CSS Pseudo Elements

Alphabetical index

A

B

C

F

G

M

P

S

T

CSS Selectors Reference

CSS Selectors Cheat Sheet for Developers

Sources

Σχετικά Άρθρα

Σχετικά με ΛΕΓΑΚΗΣ ΜΑΤΘΑΙΟΣ