CSS Selector Types – How to Select Elements to Style in CSS

CSS selectors are one of the most fundamental concepts in web development. They allow you to target specific HTML elements on a web page and apply styles to them. Without selectors, you wouldn‘t be able to control the appearance of your web pages with CSS.

As a web developer, it‘s crucial to have a solid understanding of the different types of CSS selectors and how to use them effectively. In this comprehensive guide, we‘ll dive deep into each CSS selector type, providing clear explanations and practical examples. By the end, you‘ll be equipped with the knowledge to confidently style any element on your web pages.

1. Universal Selector (*)

The universal selector, denoted by an asterisk (*), targets all elements on a page. It‘s rarely used on its own, but can be helpful in certain situations like resetting default browser styles.

Here‘s an example that removes the margin and padding from all elements:

* {
  margin: 0;
  padding: 0;
}

2. Type Selector (element)

The type selector, also known as the element selector, targets all elements of a specific type on the page. You simply use the element‘s tag name as the selector.

For instance, to style all

elements:

p {
  font-size: 16px;
  line-height: 1.5;
}

This rule sets the font size to 16 pixels and the line height to 1.5 for all paragraphs.

3. Class Selector (.class)

The class selector targets elements based on their class attribute. It‘s denoted by a dot (.) followed by the class name. Class selectors are highly reusable since you can apply the same class to multiple elements.

Here‘s an example of styling elements with a class of "highlight":

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

To apply this style, add the class to your HTML elements:

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

4. ID Selector (#id)

The ID selector targets a single element based on its unique ID attribute. It‘s denoted by a hash (#) followed by the ID name. Since IDs must be unique within a page, the ID selector is used for one-off styles or as a hook for JavaScript.

Here‘s an example of styling an element with an ID of "main-title":

#main-title {
  font-size: 32px;
  text-align: center;
}

To apply this style, add the ID to your HTML element:

<h1 id="main-title">Welcome to My Website</h1>

5. Attribute Selector ([attribute])

The attribute selector targets elements based on their attributes or attribute values. It‘s denoted by square brackets ([]). You can target elements with a specific attribute, or elements where the attribute matches a certain value.

Here are a few examples:

/* Targets all elements with a "title" attribute */
[title] {
  text-decoration: underline;
}

/* Targets all <a> elements with an "href" starting with "https" */
a[href^="https"] {
  color: green;
}

/* Targets all <img> elements with an "alt" attribute containing "logo" */
img[alt*="logo"] {
  border: 2px solid black;
}

6. Descendant Selector (space)

The descendant selector targets elements that are descendants of another element. It‘s denoted by a space between two selectors. The style rule applies to elements matching the second selector that are inside elements matching the first selector.

Here‘s an example that styles elements inside a