CSS

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;
  }
}
Learn CSS for Free
Start learning now
button icon
To advance beyond this tutorial and learn CSS by doing, try the interactive experience of Mimo. Whether you're starting from scratch or brushing up your coding skills, Mimo helps you take your coding journey above and beyond.

Sign up or download Mimo from the App Store or Google Play to enhance your programming skills and prepare for a career in tech.

You can code, too.

© 2024 Mimo GmbH