CSS Selectors

In this chapter, we will explore CSS selectors in detail. Selectors are patterns used to select the elements you want to style. Understanding CSS selectors is fundamental to applying styles effectively in your web pages.

Basic Selectors

Type Selector

The type selector targets all elements of a given type.

p {
  color: blue;
}

Class Selector

The class selector targets elements with a specific class attribute. Class selectors are prefixed with a dot (.).

.intro {
  font-style: italic;
}

ID Selector

The ID selector targets an element with a specific ID attribute. ID selectors are prefixed with a hash (#).

#header {
  background-color: yellow;
}

Universal Selector

The universal selector (*) targets all elements.

* {
  box-sizing: border-box;
}

Attribute Selectors

Attribute selectors target elements based on the presence or value of their attributes.

Existence Selector

Selects elements with a specific attribute.

a[target] {
  color: green;
}

Attribute Value Selector

Selects elements with an attribute that has a specific value.

a[target="_blank"] {
  color: green;
}

Attribute Value Contains Selector

Selects elements with an attribute whose value contains a specified substring.

a[href*="example"] {
  color: orange;
}

Attribute Value Starts With Selector

Selects elements with an attribute whose value starts with a specified substring.

a[href^="https"] {
  color: blue;
}

Attribute Value Ends With Selector

Selects elements with an attribute whose value ends with a specified substring.

a[href$=".pdf"] {
  color: red;
}

Combinator Selectors

Combinator selectors define the relationship between two or more selectors.

Descendant Selector

Selects elements that are descendants of a specified element.

div p {
  color: purple;
}

Child Selector

Selects elements that are direct children of a specified element.

div > p {
  color: brown;
}

Adjacent Sibling Selector

Selects elements that are the adjacent sibling of a specified element.

h1 + p {
  color: pink;
}

General Sibling Selector

Selects elements that are siblings of a specified element.

h1 ~ p {
  color: orange;
}

Grouping Selectors

Grouping selectors allow you to apply the same styles to multiple elements.

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

Pseudo-class Selectors

Pseudo-class selectors target elements based on their state.

:hover

Selects elements when the mouse pointer is over them.

a:hover {
  color: red;
}

:focus

Selects elements that have focus.

input:focus {
  border-color: blue;
}

:first-child

Selects elements that are the first child of their parent.

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

:last-child

Selects elements that are the last child of their parent.

p:last-child {
  font-style: italic;
}

:nth-child()

Selects elements based on their position in a group of siblings.

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

Pseudo-element Selectors

Pseudo-element selectors target specific parts of an element.

::before

Inserts content before the content of an element.

p::before {
  content: "Note: ";
  font-weight: bold;
}

::after

Inserts content after the content of an element.

p::after {
  content: " [Read More]";
  color: blue;
}

::first-line

Styles the first line of an element.

p::first-line {
  font-variant: small-caps;
}

::first-letter

Styles the first letter of an element.

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

Examples

Example 1: Styling a Navigation Menu

nav ul {
  list-style-type: none;
  padding: 0;
}

nav li {
  display: inline;
  margin-right: 10px;
}

nav a {
  text-decoration: none;
  color: black;
}

nav a:hover {
  color: blue;
}

Example 2: Highlighting Table Rows

table {
  width: 100%;
  border-collapse: collapse;
}

table th, table td {
  border: 1px solid black;
  padding: 10px;
  text-align: left;
}

table tr:nth-child(even) {
  background-color: #f2f2f2;
}

Conclusion

In this chapter, you learned about CSS selectors, including basic selectors, attribute selectors, combinator selectors, grouping selectors, pseudo-class selectors, and pseudo-element selectors. Understanding these selectors is crucial for targeting and styling HTML elements effectively.