CSS selectors

Introduction

In this lesson, I will talk about CSS selectors. as a web designer you need to know this.

Universal Selector

All elements in the document

* {
  margin: 0;
  padding: 0;
}

Type Selector

all elements

a {
  color: blue;
}

ID Selector

element with ID

#unique-id {
  background-color: green;
}

Class Selector

all elements with class

.example {
  font-size: 20px;
}

Attribute Selector

based on the presence or value of an attribute

input[type="text"] {
  border: 2px solid red;
  border-radius: 4px;
}

Pseudo-class Selector

based on their state

a:hover {
  color: green;
}

Pseudo-element Selector

Selects and styles a part of an element.

p::first-line {
  font-weight: bold;
}

Child Selector

Direct children of an element

section > div {
  background-color: orange;
}

Descendant Selector

All descendants of an element

div p {
  margin-left: 20px;
}

Adjacent Sibling Selector

Adjacent sibling element

h1 + p {
  color: purple;
}

General Sibling Selector

All sibling elements

h1 ~ p {
  color: gray;
}

Group Selector

Multiple elements

h1,
h2,
h3 {
  font-family: Arial, sans-serif;
}

Structural Pseudo-classes

This is used to define a state of element

:first-child

First child of a parent

p:first-child {
  color: blue;
}

:last-child

Last child of a parent

p:last-child {
  color: green;
}

:nth-child(n)

nth child of a parent

p:nth-child(2) {
  color: red;
}

:nth-last-child(n)

nth child of a parent, counting from the last child

p:nth-last-child(2) {
  color: purple;
}

:nth-of-type(n)

nth child of a parent, of a specific type

p:nth-of-type(2) {
  color: orange;
}

:nth-last-of-type(n)

nth child of a parent, of a specific type, counting from the last child

p:nth-last-of-type(2) {
  color: pink;
}

:first-of-type

first child of a specific type of a parent

p:first-of-type {
  color: yellow;
}

:last-of-type

last child of a specific type of a parent

p:last-of-type {
  color: brown;
}

:only-child

element if it is the only child of its parent

p:only-child {
  color: teal;
}

:only-of-type

element if it is the only child of its type of its parent

p:only-of-type {
  color: lime;
}

Dynamic Pseudo-classes

:hover

elements when you mouse over them.

a:hover {
  color: red;
}

:focus

Selects elements when they are focused.

input:focus {
  border: 2px solid blue;
}

:active

Selects elements when they are activated (e.g., clicked).

a:active {
  color: green;
}

:visited

Selects visited links.

a:visited {
  color: purple;
}

:link

Selects unvisited links.

a:link {
  color: orange;
}

:checked

Selects checked inputs (radio buttons, checkboxes).

input:checked {
  background-color: yellow;
}

:enabled

Selects enabled form elements.

input:enabled {
  background-color: white;
}

:disabled

Selects disabled form elements.

input:disabled {
  background-color: gray;
}

:required

Selects required form elements.

input:required {
  border: 2px solid red;
}

:optional

Selects optional form elements.

input:optional {
  border: 2px solid green;
}

:read-only

Selects elements that are read-only.

input:read-only {
  background-color: lightgray;
}

:read-write

Selects elements that are read-write.

input:read-write {
  background-color: white;
}

:valid

Selects elements with valid input.

input:valid {
  border: 2px solid green;
}

:invalid

Selects elements with invalid input.

input:invalid {
  border: 2px solid red;
}

:in-range

Selects elements with a value within a specified range.

input:in-range {
  background-color: lightgreen;
}

:out-of-range

Selects elements with a value outside a specified range.

input:out-of-range {
  background-color: lightcoral;
}

UI Element States

:checked

Selects elements that are checked (e.g., checkbox, radio button).

input:checked {
  border-color: blue;
}

:indeterminate

Selects elements that are in an indeterminate state (e.g., checkbox).

input:indeterminate {
  border-color: orange;
}

:default

Selects the default button in a group of buttons.

button:default {
  border: 2px solid black;
}

:valid

Selects elements with valid values.

input:valid {
  border-color: green;
}

:invalid

Selects elements with invalid values.

input:invalid {
  border-color: red;
}

:placeholder-shown

Selects input elements displaying placeholder text.

input:placeholder-shown {
  color: gray;
}

Form States

:disabled

Selects disabled form elements.

input:disabled {
  background-color: lightgray;
}

:enabled

Selects enabled form elements.

input:enabled {
  background-color: white;
}

:optional

Selects optional form elements.

input:optional {
  border-color: blue;
}

:required

Selects required form elements.

input:required {
  border-color: red;
}

:in-range

Selects elements with a value within a specified range.

input:in-range {
  border-color: green;
}

:out-of-range

Selects elements with a value outside a specified range.

input:out-of-range {
  border-color: orange;
}

Pseudo-element selectors

::after

Inserts content after the element's content.

p::after {
  content: " (read more)";
  color: blue;
}

::before

Inserts content before the element's content.

p::before {
  content: "Note: ";
  color: red;
}

::first-letter

Selects the first letter of the element's content.

p::first-letter {
  font-size: 2em;
  color: green;
}

::first-line

Selects the first line of the element's content.

p::first-line {
  font-weight: bold;
}

::selection

Selects the portion of an element that is selected by the user.

::selection {
  background: yellow;
  color: black;
}

::placeholder

Selects the placeholder text of an input or textarea.

input::placeholder {
  color: gray;
  font-style: italic;
}

::marker

Selects the marker box of a list item (usually a bullet or number).

li::marker {
  color: red;
}

::backdrop

Selects the backdrop of an element, typically used with modal elements.

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

::cue

Selects the cue text of a media element with WebVTT captions.

::cue {
  color: white;
  background: black;
}

::part(name)

Selects a part of a shadow DOM element that is marked with a part attribute.

::part(button) {
  background-color: blue;
}

::slotted(selector)

Selects elements that are distributed into a slot of a shadow DOM element.

::slotted(p) {
  color: purple;
}

::file-selector-button

Selects the button of a file input element.

input[type="file"]::file-selector-button {
  background-color: lightblue;
  border: 1px solid #ccc;
}

Other

:root

Selects the root element of the document.

:root {
  --main-color: #333;
}

:empty

Selects elements that have no children.

p:empty {
  display: none;
}

:target

Selects the target element of a URL fragment.

#section1:target {
  background-color: yellow;
}

:not(selector)

Selects elements that do not match the given selector.

:not(p) {
  color: red;
}

:nth-last-child(n)

Selects elements based on their position among their siblings, counting from the end.

p:nth-last-child(2) {
  color: purple;
}

:lang(language)

Selects elements based on the language attribute.

p:lang(en) {
  color: blue;
}

:dir(direction)

Selects elements based on the directionality of their text.

p:dir(ltr) {
  text-align: left;
}
p:dir(rtl) {
  text-align: right;
}