Intro to CSS Selectors | WebReference

CSS selectors are patterns used to select the elements to which a set of CSS styles will be applied. They are an essential part of CSS, as they determine which elements on a page the styles will be applied to.

There are many different types of CSS selectors, including element, class, ID, and attribute selectors.

Attribute Selectors

CSS attribute selectors are used to select and style elements on a web page based on their attributes and attribute values. These selectors allow you to apply styles to elements that have a specific attribute, or that have a specific attribute value. For example, you could use an attribute selector to select all input elements that have a type attribute with a value of text, and then style those elements with a particular font size.

input[type="text"] {
    font-size: 18px;
}

In this example, the attribute selector is used to match only input elements that have a type attribute with a value of text. Any other input elements on the page, such as those with a type attribute of radio or checkbox, would not be selected and styled by this selector.

Attribute selectors are often used in combination with other types of CSS selectors to create more specific and targeted styles. For example, you could use a class selector together with an attribute selector to select only those elements that have a particular class and attribute combination.

.my-class[type="text"] {
    font-size: 18px;
}

Class Selectors

CSS class selectors are used to select and style elements on a web page based on their class attribute. Class selectors are written with a period (.) followed by the class name, and they match any element that has that class applied to it. For example, if you have a p element with a class of my-class, you could use the following class selector to style it:

.my-class {
    font-size: 18px;
}

Class selectors are very useful because they allow you to create styles that can be applied to multiple elements on a page, without having to specify the element type for each one. This means that you can create a single class and apply it to multiple elements, and then use a class selector to style all of those elements at once.

<p class="my-class">This is a paragraph with the my-class class applied.</p>
<div class="my-class">This is a div with the my-class class applied.</div>

ID Selectors

ID selectors are similar to class selectors, but instead of targeting elements based on their class attribute, they target elements based on their ID attribute. These selectors are identified by a pound sign (#) followed by the ID name. For example, to apply styles to an element with the ID main-content, you would use the #main-content selector.

#main-content {
    font-size: 18px;
}

Type Selectors

Type selectors are used to select and style HTML elements based on their element type. For example, a type selector for the p element would be written as p, and it would match all p elements on a page. This type of selector can be used to set a default style for all elements of a particular type, or to create a specific style for a single element that is different from the others.

To use a type selector, you simply write the element type you want to select followed by a set of curly braces, which contains the CSS styles that you want to apply to the selected element. For example, to give all p elements a font size of 18 pixels, you would write the following CSS code:

p {
    font-size: 18px;
}

Universal Selectors

CSS universal selectors are a type of CSS selector that matches elements of any type. They are represented by the asterisk symbol (*), and they are used to apply styles to all elements on a page. For example, the following CSS code uses a universal selector to give all elements on the page a font size of 18 pixels:

* {
    font-size: 18px;
}

Universal selectors are often used in combination with other types of CSS selectors to create more specific and targeted styles. For example, you could use a universal selector together with a class selector to apply a particular style to all elements on the page that have a specific class.

*.my-class {
    font-size: 18px;
}

In this case, the universal selector would match all elements on the page, and the class selector would further refine the selection to only those elements that have the my-class class applied to them. This would result in only those elements being styled with a font size of 18 pixels.

Sibling Selectors

CSS sibling selectors allow you to select elements that are siblings of other elements. There are several types of sibling selectors, including the general sibling selector ~, the adjacent sibling selector +, and the immediate sibling selector >.

The general sibling selector ~ allows you to select all elements that are siblings of a specified element. For example, let's say you have the following HTML:

<div>
    <p>First paragraph</p>
    <p>Second paragraph</p>
    <p>Third paragraph</p>
    <p>Fourth paragraph</p>
</div>

You can use the general sibling selector to select all of the <p> elements that are siblings of the first <p> element like this:

p:first-child ~ p {
    font-size: 16px;
}

The adjacent sibling selector + allows you to select an element that is immediately preceded by another element. For example, using the same HTML demo above, you can use the adjacent sibling selector to select the second <p> element like this:

p:first-child + p {
    font-size: 16px;
}

The immediate sibling selector > is similar to the adjacent sibling selector, but it only selects elements that are directly preceded by the specified element, rather than any element that comes before it. For example, let's say you have the following HTML:

<div>
    <p>First paragraph</p>
    <div>
        <p>Second paragraph</p>
        <p>Third paragraph</p>
    </div>
    <p>Fourth paragraph</p>
</div>

You can use the immediate sibling selector to select the <p> elements that are directly inside the <div> element like this:

p:first-child > div > p {
    font-size: 16px;
}

These are just a few examples of how you can use CSS sibling selectors to select elements in your HTML.

Combinator Selectors

To demonstrate CSS combinator selectors, let's first create a simple HTML document with some nested elements:

<div>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <span>
        <a href="#">Link 1</a>
    </span>
</div>

Now, let's say we want to apply different styles to the two p elements and the a element. We can use the following CSS code:

p {
    font-size: 14px;
    color: red;
}

span a {
    font-size: 16px;
    color: blue;
}

In the first block of CSS, we are selecting the p elements and applying a font size of 14px and a red color. In the second block, we are using a combinator selector to select the a element that is nested within a spa`n element and applying a font size of 16px and a blue color.

Now let's say we want to apply a different style to the first p element. We can use the following CSS code:

p:first-child {
    font-size: 18px;
    color: green;
}

In this block, we are using the :first-child pseudo-class to select the first p element and applying a font size of 18px and a green color.

We can also use combinator selectors to select specific elements that are adjacent to one another. For example, let's say we want to apply a different style to the second p element that is immediately following the first p element. We can use the following CSS code:

p:first-child + p {
    font-size: 20px;
    color: orange;
}

In this block, we are using the + combinator selector to select the second p element that is immediately following the first p element and applying a font size of 20px and an orange color.

In summary, CSS combinator selectors allow us to select specific elements based on their relationship to other elements in the HTML document, making it easy to apply unique styles to different elements on the page.

Pseudo-Class Selectors

Pseudo-class selectors are CSS selectors that allow us to apply styles to elements based on their state or location in the document. They are used in combination with regular CSS selectors to add additional specificity to our styles.

For example, we can use the :hover pseudo-class selector to change the color of a link when the user hovers over it:

a:hover {
    color: red;
}

This will apply the red color to the link only when the user hovers over it with their cursor.

Another example is the :active pseudo-class selector, which applies styles to an element when it is actively being clicked on:

button:active {
    background-color: blue;
}

In this case, the button's background color will turn blue only when the user is actively clicking on it.

Additionally, we can use pseudo-class selectors to style elements based on their location in the document. For example, the :first-child selector allows us to apply styles to the first element of a specific type within its parent element:

li:first-child {
    font-weight: bold;
}

This will apply the bold font weight to the first li element within its parent element.

We can also use the :nth-child pseudo-class selector to apply styles to elements based on their position in their parent element. For example, we can use it to apply styles to every other li element:

li:nth-child(2n) {
    color: green;
}

This will apply the green color to every even-numbered li element within its parent element.