Class 33 | CSS Selectors and How to Target HTML Elements

CSS (Cascading Style Sheets) selectors target and apply styles to specific HTML elements. CSS selectors identify elements based on their tag name, class name, ID, attributes, etc.

Here are some examples of CSS selectors and how they can be used to target HTML elements:

1. Tag Selector

The tag selector targets all elements with a specific HTML tag name. For example, if you want to apply a style to all paragraphs in your HTML document, you can use the following CSS code:

p {
  color: blue;
}

This will apply the color blue to all paragraphs in your HTML document.

2. Class Selector

The class selector is used to target elements with a specific class name. For example, if you have a class called “highlight” in your HTML document and you want to apply a style to all elements with that class name, you can use the following CSS code:

.highlight {
  background-color: yellow;
}

This will apply a yellow background color to all elements with the class “highlight” in your HTML document.

3. ID Selector

The ID selector is used to target elements with a specific ID name. For example, if you have an element with an ID of “header” in your HTML document and you want to apply a style to that element, you can use the following CSS code:

#header {
  font-size: 24px;
}

This will apply a font size of 24 pixels to the element with the ID “header” in your HTML document.

4. Attribute Selector

The attribute selector is used to target elements with a specific attribute value. For example, if you have a list of links in your HTML document and you want to apply a style to all links that open in a new tab, you can use the following CSS code:

a[target="_blank"] {
  text-decoration: none;
}

This will remove the underline from all links in your HTML document that have the attribute target="_blank".

5. Descendant Selector

The descendant selector targets an element that is a descendant of another element. For example, if you have a div element with a class of “container” and you want to apply a style to all paragraphs inside that div element, you can use the following CSS code:

.container p {
  font-style: italic;
}

This will apply an italic font style to all paragraphs that are descendants of the div element with the class “container” in your HTML document.

These are just a few examples of CSS selectors and how they can be used to target HTML elements. Many more selectors are available, each with its unique syntax and usage.

Next Class