CSS Selectors

CSS Selectors are patterns used to select and style HTML elements. They allow you to target specific elements or groups of elements on a webpage and apply styles to them. Selectors are a core part of CSS and are used in combination with declarations (property-value pairs) to define how elements should be styled.

1. Types of CSS Selectors

CSS selectors can be categorized into several types based on their functionality. Below is a detailed explanation of each type:

a. Basic Selectors

These are the simplest and most commonly used selectors.

i. Element Selector

Purpose: Targets HTML elements by their tag name.
Syntax: element
Example:

  p {
    color: blue;
  }

CSS

This selects all <p> elements and changes their text color to blue.

ii. Class Selector

Purpose: Targets elements with a specific class attribute.
Syntax: .classname
Example:

  .highlight {
    background-color: yellow;
  }

CSS

This selects all elements with class="highlight" and gives them a yellow background.

iii. ID Selector

Purpose: Targets a single element with a specific id attribute.
Syntax: #idname
Example:

  #header {
    font-size: 24px;
  }

CSS

This selects the element with id="header" and sets its font size to 24px.

iv. Universal Selector

Purpose: Targets all elements on the page.
Syntax: *
Example:

  * {
    margin: 0;
    padding: 0;
  }

CSS

This removes the default margin and padding from all elements.

b. Combinator Selectors

These selectors combine multiple selectors to target elements based on their relationship with other elements.

i. Descendant Selector

Purpose: Targets elements that are descendants of a specified element.
Syntax: ancestor descendant
Example:

  div p {
    color: red;
  }

CSS

This selects all <p> elements that are inside a <div> element.

ii. Child Selector

Purpose: Targets direct children of a specified element.
Syntax: parent > child
Example:

  ul > li {
    list-style: none;
  }

CSS

This selects only <li> elements that are direct children of <ul>.

iii. Adjacent Sibling Selector

Purpose: Targets the element immediately following another element.
Syntax: element1 + element2
Example:

  h1 + p {
    font-weight: bold;
  }

CSS

This selects the <p> element that directly follows an <h1>.

iv. General Sibling Selector

Purpose: Targets all siblings of a specified element.
Syntax: element1 ~ element2
Example:

  h1 ~ p {
    color: green;
  }

CSS

This selects all <p> elements that are siblings of an <h1>.

c. Attribute Selectors

These selectors target elements based on their attributes or attribute values.

i. Attribute Presence

Purpose: Targets elements with a specific attribute.
Syntax: [attribute]
Example:

  [target] {
    border: 1px solid black;
  }

CSS

This selects all elements with a target attribute.

ii. Attribute Value

Purpose: Targets elements with a specific attribute value.
Syntax: [attribute="value"]
Example:

  [type="submit"] {
    background-color: blue;
  }

CSS

This selects elements with type="submit".

iii. Attribute Contains

Purpose: Targets elements whose attribute value contains a specific substring.
Syntax: [attribute*="value"]
Example:

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

CSS

This selects elements with href containing “example”.

d. Pseudo-Class Selectors

Pseudo-classes target elements based on their state or position.

i. Hover

Purpose: Targets an element when the user hovers over it.
Syntax: :hover
Example:

  a:hover {
    color: orange;
  }

CSS

This styles links when hovered.

ii. Focus

Purpose: Targets an element when it gains focus (e.g., input fields).
Syntax: :focus
Example:

  input:focus {
    border-color: blue;
  }

CSS

This styles input fields when focused.

iii. First Child

Purpose: Targets the first child of a parent element.
Syntax: :first-child
Example:

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

CSS

This styles the first <li> in a list.

e. Pseudo-Element Selectors

Pseudo-elements target specific parts of an element.

i. Before

Purpose: Inserts content before an element.
Syntax: ::before
Example:

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

CSS

This adds “Note: ” before every <p> element.

ii. After

Purpose: Inserts content after an element.
Syntax: ::after
Example:

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

CSS

This adds “(Read more)” after every <p> element.

2. Summary of CSS Selectors

Selector Type	Syntax	Example	Description
Element Selector	`element`	`p { color: blue; }`	Selects all `<p>` elements.
Class Selector	`.classname`	`.highlight { background: yellow; }`	Selects elements with `class="highlight"`.
ID Selector	`#idname`	`#header { font-size: 24px; }`	Selects the element with `id="header"`.
Universal Selector	`*`	`* { margin: 0; padding: 0; }`	Selects all elements.
Descendant Selector	`ancestor descendant`	`div p { color: red; }`	Selects `<p>` inside `<div>`.
Child Selector	`parent > child`	`ul > li { list-style: none; }`	Selects direct children of `<ul>`.
Adjacent Sibling	`element1 + element2`	`h1 + p { font-weight: bold; }`	Selects `<p>` immediately after `<h1>`.
General Sibling	`element1 ~ element2`	`h1 ~ p { color: green; }`	Selects all `<p>` siblings of `<h1>`.
Attribute Selector	`[attribute]`	`[target] { border: 1px solid black; }`	Selects elements with `target` attribute.
Pseudo-Class	`:pseudo-class`	`a:hover { color: orange; }`	Styles links when hovered.
Pseudo-Element	`::pseudo-element`	`p::before { content: "Note: "; }`	Adds content before `<p>`.

Conclusion

CSS selectors are a powerful and essential part of web development, enabling developers to target and style HTML elements with precision. By understanding and utilizing the various types of selectors—such as basic selectors, combinator selectors, attribute selectors, pseudo-classes, and pseudo-elements—you can create dynamic, responsive, and visually appealing web pages.