CSS Selectors: Targeting Elements in CSS

CSS selectors are patterns to select HTML elements on a web page for CSS rules. Selectors can target elements based on their tags, classes, IDs, and other characteristics.

How to Use CSS Selectors

Every CSS rule starts with a selector. To define CSS selectors, use the tag name, class, ID, attributes, or other characteristic of an element.

selector {
  property: value;
}

CSS Type Selector

A CSS type selector targets HTML elements by their tag name.

p {
  color: blue;
}

This example changes the text color of all paragraphs to blue.

CSS Class Selector

The CSS class selector targets elements with a specific class attribute. Classes are denoted by a period (.) followed by the class name and can be reused across multiple elements.

.example {
  font-size: 20px;
}

This rule sets the font size of elements with the class example to 20 pixels.

CSS ID Selector

The ID selector in CSS targets a single HTML element with a specific ID. IDs are denoted by a hash (#) followed by the ID name and should be unique within a document.

#unique {
  background-color: yellow;
}

This example applies a yellow background color to the element with the ID unique.

CSS Attribute Selector

CSS attribute selectors target elements based on attributes and their values. They are enclosed in square brackets ([]) and can include conditions.

a[href*="example"] {
  text-decoration: none;
}

This rule removes the underline from all anchor (<a>) tags containing "example" in their href attribute.

CSS Descendant Selector

The CSS descendant selector targets elements that are descendants of a specified element. Use a space between selectors to indicate a descendant relationship.

div p {
  margin: 10px;
}

This example sets a 10-pixel margin for all paragraphs inside a <div>.

CSS Sibling Selector

The adjacent sibling selector (+) targets the next sibling element immediately following the element before the +.

h1 + p {
  border-top: 1px solid black;
}

This rule adds a top border to paragraphs that directly follow an <h1> element.

When to Use CSS Selectors

You need selectors whenever you want to apply styles to different elements on a web page.

Styling Based on Element Types

Use type selectors for global styles. For instance, you might want all headings to have the same font.

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

Applying Styles to Specific Classes

Class selectors are ideal for styling reusable components. Create modular styles you can apply to different parts of your application.

.button {
  padding: 10px;
  border-radius: 5px;
}

Targeting Unique Elements

ID selectors are perfect for elements that are unique within the document, like a navigation bar.

#navbar {
  background-color: gray;
}

Examples of Using CSS Selectors

User Interface Customization

Web applications often use class selectors to customize user interfaces. Buttons, forms, and containers are commonly styled with classes.

.btn-primary {
  background-color: blue;
  color: white;
}
.form-input {
  margin-bottom: 15px;
}

Conditional Styling Based on Attributes

Web browsers utilize attribute selectors to style elements conditionally, such as links that open in a new tab.

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

Hierarchical Styling

Content management systems often use descendant and sibling selectors to apply hierarchical styles. For example, they might apply specific styles to list items within a navigation menu.

.nav ul li {
  display: inline-block;
  margin-right: 20px;
}

Learn More About CSS Selectors

CSS Universal Selector

The universal selector * targets all elements within a document. This can be useful for applying global styles or resetting default margins and padding for consistency across browsers.

For example, you can create a rule to ensure zero margin and padding, and sizes include padding and borders.

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

Combining Selectors

CSS allows combining multiple selectors for refined control. For instance, you can target elements with multiple classes.

.card.highlight {
  border: 2px solid orange;
}

Pseudo-Classes and Pseudo-Elements

Pseudo-classes and pseudo-elements add advanced styling capabilities. They allow targeting specific states of elements or parts of elements.

a:hover {
  color: green;
}
p::first-line {
  font-weight: bold;
}

Advanced Sibling and Descendant Selectors

Explore sibling selectors beyond the adjacent sibling selector (+). For non-adjacent siblings, use the general sibling selector (~).

h2 ~ p {
  color: gray;
}

Descendant selectors can also be combined with other selectors for more specificity.

ul.nav > li > a {
  text-decoration: none;
}

Performance Considerations

While powerful, some selectors can impact rendering performance if overused, especially on large documents. Narrow your selectors to avoid broad, inefficient rules.

/* Avoid */
div p span {
  color: red;
}

/* Better */
.content span.notification {
  color: red;
}

Responsive Design

Responsive design techniques often rely on CSS selectors combined with media queries to target different screen sizes.

@media (max-width: 600px) {
  .sidebar {
    display: none;
  }
}

Looking to dive deeper into selectors and other essential CSS concepts? Check out our CSS course.