CSS Pseudo Selectors

CSS Pseudo Selectors

Οι επιλογείς CSS ορίζουν τα στοιχεία στα οποία ισχύει ένα σύνολο κανόνων CSS.

CSS Pseudo Selectors

Table of Contents

All CSS Pseudo Classes

Note: Used with single colon [:]

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

Alphabetical index

Note:experimental= This is an experimental API that should not be used in production code.

Pseudo-classes defined by a set of CSS specifications include the following:

All CSS Pseudo Elements

Note: Used with double colon [::]

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

Alphabetical index

Note:experimental= This is an experimental API that should not be used in production code.

Pseudo-elements defined by a set of CSS specifications include the following:

CSS Selectors Reference

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
:link a:link Selects all unvisited links
::marker ::marker Selects the markers of list items
: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
::placeholder input::placeholder Selects input elements with the «placeholder» attribute specified
:read-only input:read-only Selects input elements with the «readonly» attribute specified
:read-write input:read-write Selects input elements with the «readonly» attribute NOT specified
:required input:required Selects input elements with the «required» attribute specified
:root :root Selects the document’s root element
::selection ::selection Selects the portion of an element that is selected by a user
: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

CSS Selectors Cheat Sheet for Developers

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;}

Sources

Αφήστε μια απάντηση