CSS - Selectors

Ethan D. -

Introduction to CSS Selectors

CSS selectors are a basic concept in web development that let you target and style specific HTML elements on a web page. They are patterns used to select the elements you want to style, based on their type, class, ID, attribute, or relationship to other elements.

CSS selectors give you control over the styling of your web pages. With selectors, you can apply styles to specific elements or groups of elements based on certain conditions. This precision allows you to create consistent and maintainable styles across your website.

The basic syntax of a CSS selector consists of the selector name followed by curly braces {}. Inside the curly braces, you define the styles you want to apply.

Example: Select all paragraph elements and make their text color blue

p {
  color: blue;
}

p is the selector that targets all <p> elements, and color: blue; sets the text color.

CSS selectors can be more complex than just targeting elements by their tag name. You can use class names, IDs, attributes, and various other selectors to target specific elements or groups of them. The following sections will cover different types of CSS selectors and how to use them in your stylesheets.

Types of CSS Selectors

CSS offers different types of selectors that allow you to target elements based on various criteria.

Element Selectors

Element selectors target elements based on their tag name. They select all instances of a specific HTML element on a page.

To use an element selector, simply use the tag name without any prefix.

Example: Select all <h1> elements and make their text red

h1 {
  color: red;
}

Other examples include p, div, a, img.

Class Selectors

Class selectors target elements based on their class attribute. They allow you to select elements that belong to a specific class.

To create a class selector, use a dot (.) followed by the class name.

Example: Select elements with the class 'highlight' and give them a yellow background

.highlight {
  background-color: yellow;
}

You can apply a class to an element by adding the class attribute to the HTML tag:

Example: Apply a class to an element

<p class="highlight">This paragraph will have a yellow background.</p>

An element can have multiple classes by separating them with spaces:

Example: An element with multiple classes

<p class="highlight bold">This paragraph will have a yellow background and bold text.</p>

ID Selectors

ID selectors target elements based on their unique ID attribute. They select one element with a specific ID.

To create an ID selector, use a hash (#) followed by the ID name.

Example: Select the element with the ID 'header' and make its text uppercase

#header {
  text-transform: uppercase;
}

You can apply an ID to an element by adding the id attribute to the HTML tag:

Example: Apply an ID to an element

<h1 id="header">This heading will be uppercase.</h1>

The key difference between classes and IDs is that IDs are unique and used once per page, while classes can be reused multiple times.

Attribute Selectors

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

To create an attribute selector, use square brackets ([]) and specify the attribute name or both name and value.

Example: Select all <a> elements with the 'target' attribute and make their text bold

a[target] {
  font-weight: bold;
}

You can also select elements based on value:

Example: Select all <input> elements with type='text' and give them borders

input[type="text"] {
  border: 1px solid black;
}

Attribute selectors provide flexibility in targeting based on attributes.

Descendant Selectors

Descendant selectors target descendants of another element.

To create this selector, use space between ancestor and descendant selectors.

Example: Target all <p> inside <div>

div p {
  font-style: italic;
}

This targets all <p> inside any level of nesting within <div>.

Child Selectors

Child selectors target direct children of another element.

Use greater-than sign (>) between parent-child for this selector:

Example: Target direct children <li> in <ul>

ul > li {
  list-style-type: none;
}

Difference from descendant is child targets only immediate children.

Adjacent Sibling Selector

Adjacent sibling selects adjacent siblings sharing the same parent directly next to each other using a plus sign (+).

Example: Target first <p> immediately after <h2>

h2 + p {
  margin-top: 10px;
}

This targets first <p> after <h2>.

General Sibling Selector

General sibling selects siblings sharing the same parent not necessarily next to each other using a tilde (~).

Example: Target all <p> siblings of <h2>

h2 ~ p {
  padding-left: 20px;
}

This targets all <p> siblings of any position relative to <h2>.

Pseudo-Class Selector

Pseudo-class targets elements based on specific state or condition using a colon (:) followed by name.

Example: Change color when hovered over

a:hover {
  color: red;
}

Other examples include :active, :focus, :visited, :first-child.

Pseudo-Element Selector

Pseudo-element allows selecting and styling parts without modifying the HTML structure using double colon (::) followed by name.

Example: Insert content before each <h1>

h1::before {
  content: "→";
}

Other examples include ::after, ::first-letter, ::first-line.

Combining Selectors

CSS allows you to combine multiple selectors to create more specific styles. By using a combination of selectors, you can apply styles to elements that meet multiple criteria.

To combine selectors, write them one after another without any spaces between them. The order of the selectors is important as it determines the specificity and how the styles will be applied.

Example: Target all <p> elements with the class 'highlight' inside a <div>

div p.highlight {
  background-color: yellow;
  font-weight: bold;
}

When combining selectors, it's important to understand specificity and cascading order. Specificity determines which styles take precedence when multiple selectors target the same element. The more specific a selector is, the higher its priority.

The specificity order from highest to lowest is:

  1. Inline styles (applied directly using the style attribute)
  2. ID selectors
  3. Class selectors, attribute selectors, and pseudo-class selectors
  4. Element selectors and pseudo-element selectors

If two selectors have the same specificity, the one that appears later in the stylesheet will take precedence.

Example: Understanding Specificity

/* Element selector */
p {
  color: black;
}

/* Class selector */
.highlight {
  color: blue;
}

/* ID selector */
#special {
  color: red;
}
<p class="highlight" id="special">This paragraph will have red text.</p>

The paragraph will have red text because ID selector has highest specificity.

When combining selectors, keep your selections simple and specific as possible for readability and maintainability of your stylesheets. Avoid overly complex or long combinations unless necessary.

Example: Keeping Selectors Simple and Specific

/* Avoid complex selectors */
div.container p.highlight span.bold {
  font-weight: bold;
}

/* Prefer simpler and more specific selectors */
.highlight .bold {
  font-weight: bold;
}

The second selector is simpler, making it easier to understand and maintain.