CSS Selectors - 58 types (Reference)

Tech:
Css
Since:
1 year ago
Views:
7

The CSS selectors are can be used to select elements in a HTML document. Here is a list of 58 types of css selectors.

Selectors:

*

Selecting all elements in the document.

* {
  // code
}

<html>
  Selected
  <head>Selected</head>
  <body>
    Selected
    <header>Selected</header>
    <div>Selected</div>
    <span>Selected</div>
    <p>Selected</p>
    <footer>Selected</footer>
  </body>
</html>

:root

Selects the root element. By default, the root element is the html element.

:root {
  // code
}

<html>
  Selected
  <head></head>
  <body></body>
</html>

class

Selects elements with a class attribute that contains the specified value.

.xx {
  // code
}

<div class="xx">Selected</div>

id

Selects elements with an id attribute that contains the specified value.

#xx {
  // code
}

<div id="xx">Selected</div>

element

Selects elements with the specified tag name.

p {
  // code
}

div {
  // code
}

span {
  // code
}

<p>Selected</p>
<span>Selected</span>
<div>Selected</div>
<header></header>
<footer></footer>

Selector,Selector

Selects elements that match the specified selectors. Used for applying same style to multiple elements.

.xx,
.yy {
  // code
}

<div class="xx">Selected</div>
<div class="yy">Selected</div>

SelectorSelector

Selects elements that match all of the specified selectors.

.xx.yy {
  // code
}

.aa#bb {
  // code
}

<div class="xx yy"></div>
<div class="aa" id="bb"></div>

Selector Selector

Selects elements inside an element. Any level of nesting is allowed.

.xx .yy {
  // code
}

<div class="xx">
  <div class="yy">Selected</div>
</div>

Selector > Selector

Selects elements by matching parent selector.

div > .yy {
  // code
}

<div>
  <div class="yy">Selected</div>
</div>

<span>
  <div class="yy"></div>
</span>

Selector + Selector

Selects an element which is immediate next sibling.

.xx + .yy {
  // code
}

<div class="xx"></div>
<div class="yy">Selected</div>

Selector ~ Selector

Selects elements which are next siblings.

.xx ~ .yy {
  // code
}

<div class="yy"></div>
<div class="xx"></div>
<div class="yy">Selected</div>
<div></div>
<div class="yy">Selected</div>
<div class="yy">Selected</div>

[attribute]

Selects elements using attribute name.

[name] {
  // code
}

<div name="xx">Selected</div>

[attribute=value]

Selects elements using attribute name and value.

[name="xx"] {
  // code
}

<div name="xx">Selected</div>

[attribute~=value]

Selects elements using attribute name and any part of the value. Value should be separated by space if multiple.

[name~="yy"] {
  // code
}

<div name="xx yy zz">Selected</div>
<div name="yy">Selected</div>

[attribute|=value]

Selects elements using attribute name and begining part of the value. Value should be either single string or separated by dash(-).

[name|="xx"] {
  // code
}

<div name="xx">Selected</div>
<div name="xx-yy">Selected</div>

[attribute^=value]

Selects elements using attribute name and begining part of the value. Value can be single string or multiple, it checks only the begining.

[name^="xx"] {
  // code
}

<div name="xx yy">Selected</div>
<div name="xx_yy">Selected</div>

[attribute$=value]

Selects elements using attribute name and ending part of the value. Value can be single string or multiple, it checks only the ending.

[name$="yy"] {
  // code
}

<div name="xx yy">Selected</div>
<div name="xx_yy">Selected</div>

[attribute*=value]

Selects elements using attribute name and any part of the value. Value can be single string or multiple, it checks only the value.

[name*="zz"] {
  // code
}

<div name="yy"></div>
<div name="xx yy"></div>
<div name="xx zz">Selected</div>
<div name="xx_yy_zz">Selected</div>

:checked

Selects radio and checkbox elements which are checked.

.xx:checked {
  // code
}

<input type="radio" />

<input type="radio" class="xx" /> Selected

<input type="checkbox" class="xx" /> Selected

:disabled

Selects elements which are disabled.

.xx:disabled {
  // code
}

<button></button>

<button class="xx" disabled>Selected</button>

<input class="xx" disabled /> Selected

<input type="radio" class="xx" disabled /> Selected

<input type="checkbox" class="xx" disabled /> Selected

:enabled

Selects elements which are enabled.

.xx:enabled {
  // code
}

<input class="xx" disabled />

<input class="xx" /> Selected

<input type="radio" class="xx" /> Selected

:in-range

Selects input elements which are within min and max range.

input:in-range {
  // code
}

<input type="number" min="0" max="10" value="20" />

<input type="number" min="0" max="10" value="5" /> Selected

:out-of-range

Selects input elements which are exceeding min and max range.

input:out-of-range {
  // code
}

<input type="number" min="0" max="10" value="20" /> Selected

<input type="number" min="0" max="10" value="5" />

:default

Selects radio and checkbox elements which are checked by default.

.xx:default {
  // code
}

<input type="radio" class="xx" checked /> Selected

<input type="radio" class="xx" />

<input type="checkbox" class="xx" checked /> Selected

<input type="checkbox" class="xx" />

:indeterminate

Selects indeterminate radio, checkbox or progress elements which are in indeterminate state.

.xx:indeterminate {
  // code
}

<input type="checkbox" class="xx" />

<script>
  document.querySelector(".xx").indeterminate = false;
</script>

:valid

Selects input elements which are valid after inline validation.

input:valid {
  // code
}

<input type="email" class="xx" /> Selected

<input type="email" class="xx" value="aaa" />

:invalid

Selects input elements which are invalid after inline validation.

input:invalid {
  // code
}

<input type="email" class="xx" />

<input type="email" class="xx" value="aaa" /> Selected

:optional

Selects input elements which are not required by validation.

input:optional {
  // code
}

<input type="text" /> Selected

<input type="text" required />

:read-only

Selects input elements which are read only.

input:read-only {
  // code
}

<input type="text" />

<input type="text" readonly /> Selected

:read-write

Selects input elements which are read and write.

input:read-write {
  // code
}

<input type="text" /> Selected

<input type="text" readonly />

:required

Selects input elements which are required by validation.

input:required {
  // code
}

<input type="text" />

<input type="text" required /> Selected

::placeholder

Selects the placeholder of input elements.

input::placeholder {
  // code
}

/* Edge */
input::-webkit-input-placeholder {
  // code
}

/* Internet Explorer 10-11 */
input:-ms-input-placeholder {
  // code
}

<input class="xx" placeholder="some text" />

::after

Selects the content after the element. To insert content at the end of the element. It is a pseudo element.

div::after {
  // code
}

<div></div>

::before

Selects the content before the element. To insert content at the end of the element. It is a pseudo element.

div::before {
  // code
}

<div></div>

:active

Selects elements which are active. Element become active when clicked/pressed and leave active state when click ends.

div:active {
  // code
}

<div></div>

:focus

Selects elements which are focused. Element become focused when clicked and leave focused state when clicked outside.

div:focus {
  // code
}

<div></div>

:hover

Selects elements on hover. Element becomes hovering state when the mouse is over and leaves when the mouse out.

div:focus {
  // code
}

<div></div>

:empty

Selects elements without content. There should be no text, child elements or empty space.

.xx:empty {
  // code
}

<div class="xx"></div>
Selected

Selects unvisited anchor elements.

a:link {
  // code
}

<a href="#"></a>

:visited

Selects visited anchor elements.

a:link {
  // code
}

<a href="#"> </a>

:first-child

Selects the first child of the selected elements.

.xx div:first-child {
  // code
}

<div class="xx">
  <div class="yy">Selected</div>
  <div class="yy"></div>
  <section>
    <span class="yy"></span>
    <div class="yy"></div>
    <div class="yy"></div>
  </section>
</div>

:first-of-type

Selects every first element inside selected elements.

.xx div:first-of-type {
  // code
}

<div class="xx">
  <div class="yy">Selected</div>
  <div class="yy"></div>
  <section>
    <span class="yy"></span>
    <div class="yy">Selected</div>
    <div class="yy"></div>
  </section>
</div>

:last-child

Selects the last child of the selected elements.

.xx div:last-child {
  // code
}

<div class="xx">
  <div class="yy"></div>
  <div class="yy"></div>
  <section>
    <span class="yy"></span>
    <div class="yy"></div>
    <div class="yy">Selected</div>
  </section>
</div>

:last-of-type

Selects every last element inside selected elements.

.xx div:last-of-type {
  // code
}

<div class="xxx">
  <div class="yy"></div>
  <div class="yy">Selected</div>
  <section>
    <div class="yy"></div>
    <div class="yy">Selected</div>
    <span class="yy"></span>
  </section>
</div>

:nth-child()

Selects child elements using custom selector from top.

.aa span:nth-child(1) {
  // code
}

.bb span:nth-child(odd) {
  // code
}

.cc span:nth-child(even) {
  // code
}

.dd span:nth-child(3n + 0) {
  // code
}

<div class="aa">
  <span>Selected</span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

<div class="bb">
  <span>Selected</span>
  <span></span>
  <span>Selected</span>
  <span></span>
  <span>Selected</span>
  <span></span>
</div>

<div class="cc">
  <span></span>
  <span>Selected</span>
  <span></span>
  <span>Selected</span>
  <span></span>
  <span>Selected</span>
</div>

<div class="dd">
  <span></span>
  <span></span>
  <span>Selected</span>
  <span></span>
  <span></span>
  <span>Selected</span>
</div>

:nth-of-type()

Select child elements using custom selector of particular type from top.

.aa span:nth-of-type(1) {
  // code
}

.bb span:nth-of-type(odd) {
  // code
}

.cc span:nth-of-type(even) {
  // code
}

.ss span:nth-of-type(3n + 0) {
  // code
}

<div class="aa">
  <span>Selected</span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

<div class="bb">
  <span>Selected</span>
  <span></span>
  <span>Selected</span>
  <span></span>
  <span>Selected</span>
  <span></span>
</div>

<div class="cc">
  <span></span>
  <span>Selected</span>
  <span></span>
  <span>Selected</span>
  <span></span>
  <span>Selected</span>
</div>

<div class="dd">
  <span></span>
  <span></span>
  <span>Selected</span>
  <span></span>
  <span></span>
  <span>Selected</span>
</div>

:nth-last-child()

Selects child elements using custom selector from bottom.

.aa span:nth-last-child(1) {
  // code
}

.bb span:nth-last-child(odd) {
  // code
}

.cc span:nth-last-child(even) {
  // code
}

.dd span:nth-last-child(3n + 0) {
  // code
}

<div class="aa">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span>Selected</span>
</div>

<div class="bb">
  <span></span>
  <span>Selected</span>
  <span></span>
  <span>Selected</span>
  <span></span>
  <span>Selected</span>
</div>

<div class="cc">
  <span>Selected</span>
  <span></span>
  <span>Selected</span>
  <span></span>
  <span>Selected</span>
  <span></span>
</div>

<div class="dd">
  <span>Selected</span>
  <span></span>
  <span></span>
  <span>Selected</span>
  <span></span>
  <span></span>
</div>

:nth-last-of-type()

Select child elements using custom selector of particular type from bottom.

.aa span:nth-last-of-type(1) {
  // code
}

.bb span:nth-last-of-type(odd) {
  // code
}

.cc span:nth-last-of-type(even) {
  // code
}

.dd span:nth-last-of-type(3n + 0) {
  // code
}

<div class="aa">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span>Selected</span>
</div>

<div class="bb">
  <span></span>
  <span>Selected</span>
  <span></span>
  <span>Selected</span>
  <span></span>
  <span>Selected</span>
</div>

<div class="cc">
  <span>Selected</span>
  <span></span>
  <span>Selected</span>
  <span></span>
  <span>Selected</span>
  <span></span>
</div>

<div class="dd">
  <span>Selected</span>
  <span></span>
  <span></span>
  <span>Selected</span>
  <span></span>
  <span></span>
</div>

:not()

Selects elements excluding the specified selector.

span:not(.xx) {
  // code
}

<span class="xx"></span>
<div class="yy">Selected</div>
<span class="xx"></span>

:only-of-type

Selects every element that is the only child of its parent that matches the specified selector.

span:only-of-type {
  // code
}

<div>
  <span>Selected</span>
  <div>
    <span>Selected</span>
  </div>
</div>
<div>
  <span></span>
  <span></span>
</div>

:only-child

Selects elements if it the only child.

span:only-child {
  // code
}

<div>
  <span></span>
  <div>
    <span>Selected</span>
  </div>
</div>
<div>
  <span></span>
  <span></span>
</div>

::selection

Selects the text selected by a user.

span::selection {
  // code
}

<span> Text, which can be styled on seletion </span>

:target

Selects target elements which are linked by anchor target after cliking on anchor tag.

div:target {
  // code
}

<a href="#xx"></a>
<div id="xx">Selected</div>

::first-letter

Selects the first letter of the text content.

.xx:first-letter {
  // code
}

<div class="xx">Fallinfo</div>
// Only F is selected

::first-line

Selects the first line of the text content.

.xx:first-letter {
  // code
}

<div class="xx" >
  Fallinfo </br >
  Some content
  </div >

  // Only Fallinfo is selected

:fullscreen

Selects element only if it is in fullscreen.

/* Standard */
.xx:fullscreen {
  // code
}

/* Safari */
.xx:-webkit-full-screen {
  // code
}

/* IE11 */
.xx:-ms-fullscreen {
  // code
}

<div class="xx"></div>

// Selected in full screen mode

:lang()

Selects elements with lang attribute and value.

div:lang(xx) {
  // code
}

<div lang="xx">Selected</div>
<div lang="xx-yy"></div>
More Articles
CSS Background - 10 Properties and its Values (Reference)
1 year ago
2
CSS Font - 11 Properties and its Values (Reference)
1 year ago
3
CSS Text - 11 Properties and its Values (Reference)
1 year ago
7
CSS Flex - 13 Properties and its Values (Reference)
1 year ago
0
CSS Functions - 14 Functions (Reference)
1 year ago
7