css selectors

CSS Pseudo Selectors

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

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

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

Pseudo-classes 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

Pseudo Elements 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:

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

Προεπιλεγμένη Εικόνα
Ματθαίος Λεγάκης

Μαέστρος / Συνθέτης / Καθηγητής Μουσικής. Χόμπι το Web Design

Άρθρα: 22

Υποβολή απάντησης