Understanding CSS Selectors: A Comprehensive Guide

CSS Selectors Fundamentals

CSS selectors are patterns used to select elements you want to style. When working with internal stylesheets, CSS rules are defined within the <style> tags placed in the document's <head> section.

Basic Syntax

The fundamental structure of a CSS rule consists of a selector followed by a declaration block enclosed in curly braces:


selector {
  property: value;
  another-property: another-value;
}

The declaration block contains one or more declarations, where each declaration is a property-value pair separated by a colon, and declarations are separated by semicolons.

Types of CSS Selectors

1. Element Selectors

Element selectors target HTML tags direct. They apply styles to all instances of a specific element type.


article {
  color: #2c3e50;
  font-size: 16px;
  line-height: 1.6;
}

2. ID Selectors

ID selectors target elements with a specific ID attribute. IDs should be unique within a document.


#main-content {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
}

3. Class Selectors

Class selectors target elements with a specific class attribute. Unlike IDs, class values can be shared across multiple elements.


.highlight {
  background-color: #fff3cd;
  border-left: 4px solid #ffc107;
}

.important {
  font-weight: bold;
  color: #dc3545;
}

4. Universal Selector

The universal selector (*) targets all elements on a page.


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

5. Attribute Selectors

Attribute selectors target elements based on their attributes and attribute values.

Selecting elemetns with a specific attribute:


[data-tooltip] {
  position: relative;
  cursor: help;
}

Selecting elements with a specific attribute value:


[data-status="active"] {
  border-color: #28a745;
}

[data-status="inactive"] {
  border-color: #dc3545;
}

Selecting elements whose attribute value starts with a specific string:


[href^="https://"] {
  padding-right: 15px;
  background-image: url('external-link.png');
  background-repeat: no-repeat;
  background-position: right center;
}

Selecting elements whose attribute value ends with a specific string:


[src$=".png"] {
  border: 2px solid #007bff;
}

[src$=".pdf"] {
  border: 2px solid #dc3545;
}

Selecting elements whose attribute value contains a specific string:


[class*="column"] {
  float: left;
  padding: 10px;
}

[title*="documentation"] {
  font-style: italic;
}

6. Intersection Selectors

Intersection selectors combine multiple selectors to target elements that satisfy all conditions simultaneously.


nav li.active {
  background-color: #007bff;
  color: white;
}

input[type="text"].required {
  border: 2px solid #dc3545;
}

section.featured article {
  border-top: 3px solid #ffc107;
}

7. Grouping Selectors

Grouping selectors (also known as union selectors) allow you to apply the same styles to multiple selectors by separating them with commas.


h1, h2, h3 {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #343a40;
}

header, footer {
  background-color: #343a40;
  color: white;
  padding: 15px;
}

#sidebar, .aside {
  width: 25%;
  float: right;
}

These grouping selectors help reduce code repetition by applying the same declarations to multiple elements at once.

Tags: css selectors Styling web-development frontend

Posted on Fri, 10 Jul 2026 17:16:10 +0000 by steveclondon

Freaks City