What are selectors in CSS and types of selectors?

[admin]

What are Selectors?
CSS selectors identify specific HTML elements as targets for CSS styles. This topic covers how CSS selectors target
HTML elements. Selectors use a wide range of over 50 selection methods offered by the CSS language, including
elements, classes, IDs, pseudo-elements and pseudo-classes, and patterns.

Basic selectors

Code: Select all

*

Universal selector (all elements)

Code: Select all

div 

Tag selector (all <div> elements)

Code: Select all

.blue

Class selector (all elements with class blue)

Code: Select all

.blue.red

All elements with class blue and red (a type of Compound selector)

Code: Select all

#headline

ID selector (the element with "id" attribute set to headline)

Code: Select all

:pseudo-class

All elements with pseudo-class

Code: Select all

::pseudo-element

Element that matches pseudo-element

Code: Select all

:lang(en)

Element that matches :lang declaration, for example <span lang="en">

Code: Select all

div > p 

child selector

Note: The value of an ID must be unique in a web page. It is a violation of the HTML standard to use the value of an ID more than once in the same document tree.

Attribute Selectors
Attribute selectors can be used with various types of operators that change the selection criteria accordingly. They select an element using the presence of a given attribute or attribute value.
[attribute]
Selects elements with the given attribute.

Code: Select all

div[data-color] {
 color: red;
}
<div data-color="red">This will be red</div>
<div data-color="green">This will be red</div>
<div data-background="red">This will NOT be red</div>

[attribute="value"]
Selects elements with the given attribute and value.

Code: Select all

div[data-color="red"] {
 color: red;
}
<div data-color="red">This will be red</div>
<div data-color="green">This will NOT be red</div>
<div data-color="blue">This will NOT be red</div>

[attribute*="value"]
Selects elements with the given attribute and value where the given attribute contains the given value anywhere (as
a substring).

Code: Select all

[class*="foo"] {
 color: red;
}
<div class="foo-123">This will be red</div>
<div class="foo123">This will be red</div>
<div class="bar123foo">This will be red</div>
<div class="barfooo123">This will be red</div>
<div class="barfo0">This will NOT be red</div>

[attribute~="value"]
Selects elements with the given attribute and value where the given value appears in a whitespace-separated list.

Code: Select all

[class~="color-red"] {
 color: red;
}
<div class="color-red foo-bar the-div">This will be red</div>
<div class="color-blue foo-bar the-div">This will NOT be red</div>

[attribute^="value"]
Selects elements with the given attribute and value where the given attribute begins with the value.

Code: Select all

[class^="foo-"] {
 color: red;
}
<div class="foo-123">This will be red</div>
<div class="foo-234">This will be red</div>
<div class="bar-123">This will NOT be red</div>

[attribute$="value"]
Selects elements with the given attribute and value where the given attribute ends with the given value.

Code: Select all

[class$="file"] {
 color: red;
}
<div class="foobar-file">This will be red</div>
<div class="foobar-file">This will be red</div>
<div class="foobar-input">This will NOT be red</div>

[attribute|="value"]
Selects elements with a given attribute and value where the attribute's value is exactly the given value or is exactly
the given value followed by - (U+002D)

Code: Select all

[lang|="EN"] {
 color: red;
}
<div lang="EN-us">This will be red</div>
<div lang="EN-gb">This will be red</div>
<div lang="PT-pt">This will NOT be red</div>

[attribute="value" i]
Selects elements with a given attribute and value where the attribute's value can be represented as Value, VALUE,
vAlUe or any other case-insensitive possibility.

Code: Select all

[lang="EN" i] {
 color: red;
}
<div lang="EN">This will be red</div>
<div lang="en">This will be red</div>
<div lang="PT">This will NOT be red</div>

Specificity of attribute selectors
0-1-0
Same as class selector and pseudoclass.

Code: Select all

*[type=checkbox] // 0-1-0

Note that this means an attribute selector can be used to select an element by its ID at a lower level of specificity than if it was selected with an ID selector: [id="my-ID"] targets the same element as #my-ID but with lower specificity.

Combinators
Descendant Combinator: selector selector
A descendant combinator, represented by at least one space character (), selects elements that are a descendant of
the defined element. This combinator selects all descendants of the element (from child elements on down).

Code: Select all

div p {
 color:red;
}
<div>
 <p>My text is red</p>
 <section>
 <p>My text is red</p>
 </section>
</div>
<p>My text is not red</p>

In the above example, the first two <p> elements are selected since they are both descendants of the <div>.

Child Combinator: selector > selector
The child (>) combinator is used to select elements that are children, or direct descendants, of the specified element.

Code: Select all

div > p {
 color:red;
}
<div>
 <p>My text is red</p>
 <section>
 <p>My text is not red</p>
 </section>
</div>

The above CSS selects only the first <p> element, as it is the only paragraph directly descended from a <div>.
The second <p> element is not selected because it is not a direct child of the <div>.

Adjacent Sibling Combinator: selector + selector
The adjacent sibling (+) combinator selects a sibling element that immediate follows a specified element.

Code: Select all

p + p {
 color:red;
}
<p>My text is not red</p>
<p>My text is red</p>
<p>My text is red</p>
<hr>
<p>My text is not red</p>

The above example selects only those <p> elements which are directly preceded by another <p> element.

General Sibling Combinator: selector ~ selector
The general sibling (~) combinator selects all siblings that follow the specified element.

Code: Select all

p ~ p {
 color:red;
}
<p>My text is not red</p>
<p>My text is red</p>
<hr>
<h1>And now a title</h1>
<p>My text is red</p>

The above example selects all <p> elements that are preceded by another <p> element, whether or not they are immediately adjacent.

Pseudo-classes
Pseudo-classes are keywords which allow selection based on information that lies outside of the document tree or that cannot be expressed by other selectors or combinators. This information can be associated to a certain state (state and dynamic pseudo-classes), to locations (structural and target pseudo-classes), to negations of the former (negation pseudo-class) or to languages (lang pseudo-class). Examples include whether or not a link has been followed (:visited), the mouse is over an element (:hover), a checkbox is checked (:checked), etc.
Syntax

Code: Select all

selector:pseudo-class {
 property: VALUE;
}

List of pseudo-classes:

Code: Select all

:active

Applies to any element being activated (i.e. clicked) by the user.

Code: Select all

:any   

Allows you to build sets of related selectors by creating groups that the included items will match. This is an alternative to repeating an entire selector.

Code: Select all

:target 

Selects the current active #news element (clicked on a URL containing that anchor name)

Code: Select all

:checked 

Applies to radio, checkbox, or option elements that are checked or toggled into an "on" state.

Code: Select all

:default 

Represents any user interface element that is the default among a group of similar elements.

Code: Select all

:disabled 

Applies to any UI element which is in a disabled state.

Code: Select all

:empty 

Applies to any element which has no children.

Code: Select all

:enabled 

Applies to any UI element which is in an enabled state.

Code: Select all

:first 

Used in conjunction with the @page rule, this selects the first page in a printed document.

Code: Select all

:first-child 

Represents any element that is the first child element of its parent.

Code: Select all

:first-of-type 

Applies when an element is the first of the selected element type inside its parent. This may or may not be the first-child.

Code: Select all

:focus 

Applies to any element which has the user's focus. This can be given by the user's keyboard, mouse events, or other forms of input.

Code: Select all

:focus-within 

Can be used to highlight a whole section when one element inside it is focused. It matches any element that the :focus pseudo-class matches or that has a descendant focused.

Code: Select all

:full-screen 

Applies to any element displayed in full-screen mode. It selects the whole stack of elements and not just the top level element.

Code: Select all

:hover 

Applies to any element being hovered by the user's pointing device, but not activated.

Code: Select all

:indeterminate

Applies radio or checkbox UI elements which are neither checked nor unchecked, but are in an indeterminate state. This can be due to an element's attribute or DOM manipulation.

Code: Select all

:in-range

The :in-range CSS pseudo-class matches when an element has its value attribute inside the specified range limitations for this element. It allows the page to give a feedback that the value currently defined using the element is inside the range limits.

Code: Select all

:invalid 

Applies to <input> elements whose values are invalid according to the type specified in the type= attribute.

Code: Select all

:lang

Applies to any element who's wrapping <body> element has a properly designated lang= attribute. For the pseudo-class to be valid, it must contain a valid two or three letter language code.

Code: Select all

:last-child 

Represents any element that is the last child element of its parent.

Code: Select all

:last-of-type 

Applies when an element is the last of the selected element type inside its parent. This may or may not be the last-child.

Code: Select all

:left 

Used in conjunction with the @page rule, this selects all the left pages in a printed document.

Code: Select all

:link 

Applies to any links which haven't been visited by the user.

Code: Select all

:not()

Applies to all elements which do not match the value passed to (:not(p) or :not(.class-name) for example. It must have a value to be valid and it can only contain one selector. However, you can chain multiple :not selectors
together.

Code: Select all

:nth-child

Applies when an element is the n-th element of its parent, where n can be an integer, a mathematical expression (e.g n+3) or the keywords odd or even.

Code: Select all

:nth-of-type

Applies when an element is the n-th element of its parent of the same element type, where n can be an integer, a mathematical expression (e.g n+3) or the keywords odd or even.

Code: Select all

:only-child

The :only-child CSS pseudo-class represents any element which is the only child of its parent. This is the same as
:first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity.

Code: Select all

:optional

The :optional CSS pseudo-class represents any element that does not have the required attribute set on it. This allows
forms to easily indicate optional fields and to style them accordingly.

Code: Select all

:out-of-range

The :out-of-range CSS pseudo-class matches when an element has its value attribute outside the specified range limitations for this element. It allows the page to give a feedback that the value currently defined using the
element is outside the range limits. A value can be outside of a range if it is either smaller or larger than maximum and minimum set values.

Code: Select all

:placeholder-shown 

Experimental. Applies to any form element currently displaying placeholder text.

Code: Select all

:read-only 

Applies to any element which is not editable by the user.

Code: Select all

:read-write

Applies to any element that is editable by a user, such as <input> elements.

Code: Select all

:right 

Used in conjunction with the @page rule, this selects all the right pages in a printed document.

Code: Select all

:root 

matches the root element of a tree representing the document.

Code: Select all

:scope

CSS pseudo-class matches the elements that are a reference point for selectors to match against.

Code: Select all

:target 

Selects the current active #news element (clicked on a URL containing that anchor name)

Code: Select all

:visited 

Applies to any links which have has been visited by the user.

Child Pseudo Class
The :nth-child(an+b) CSS pseudo-class matches an element that has an+b-1 siblings before it in the document tree, for a given positive or zero value for n

Class Name Selectors
The class name selector select all elements with the targeted class name. For example, the class name .warning would select the following <div> element:

Code: Select all

<div class="warning">
 <p>This would be some warning copy.</p>
</div>

You can also combine class names to target elements more specifically. Let's build on the example above to showcase a more complicated class selection.

CSS

Code: Select all

.important {
 color: orange;
}
.warning {
 color: blue;
}
.warning.important {
 color: red;
}

HTML

Code: Select all

<div class="warning">
 <p>This would be some warning copy.</p>
</div>
<div class="important warning">
 <p class="important">This is some really important warning copy.</p>
</div>

In this example, all elements with the .warning class will have a blue text color, elements with the .important class with have an orange text color, and all elements that have both the .important and .warning class name will have a red text color.
Notice that within the CSS, the .warning.important declaration did not have any spaces between the two class
names. This means it will only find elements which contain both class names warning and important in their class attribute. Those class names could be in any order on the element. If a space was included between the two classes in the CSS declaration, it would only select elements that have parent elements with a .warning class names and child elements with .important class names.

Select element using its ID without the high specificity of the ID selector
This trick helps you select an element using the ID as a value for an attribute selector to avoid the high specificity of
the ID selector.
HTML:

Code: Select all

<div id="element">...</div>

CSS

Code: Select all

#element { ... } /* High specificity will override many selectors */
[id="element"] { ... } /* Low specificity, can be overridden easily */

The :last-of-type selector
The :last-of-type selects the element that is the last child, of a particular type, of its parent. In the example below,
the css selects the last paragraph and the last heading h1.

Code: Select all

p:last-of-type {
 background: #C5CAE9;
}
h1:last-of-type {
 background: #CDDC39;
}

Code: Select all

<div class="container">
 <p>First paragraph</p>
 <p>Second paragraph</p>
 <p>Last paragraph</p>
 <h1>Heading 1</h1>
 <h2>First heading 2</h2>
 <h2>Last heading 2</h2>
</div>

CSS3 :in-range selector example

Code: Select all

<style>
input:in-range {
 border: 1px solid blue;
}
</style>

Code: Select all

<input type="number" min="10" max="20" value="15">
<p>The border for this value will be blue</p>

The :in-range CSS pseudo-class matches when an element has its value attribute inside the specified range limitations for this element. It allows the page to give a feedback that the value currently defined using the element is inside the range limits

ID selectors
ID selectors select DOM elements with the targeted ID. To select an element by a specific ID in CSS, the # prefix is used.
For example, the following HTML div element…

Code: Select all

<div id="exampleID">
 <p>Example</p>
</div>

…can be selected by #exampleID in CSS as shown below:

Code: Select all

#exampleID {
 width: 20px;
}

Note: The HTML specs do not allow multiple elements with the same ID