Basic CSS

Home / Topic / Basic CSS / CSS Selectors

CSS Selectors

Selectors are one of the most important parts of CSS as they define which HTML elements the styles will be applied to. Knowing how to use different types of selectors will allow you to write CSS rules that affect the right elements of your web page.

Basic Selectors

Basic selectors refer directly to HTML elements by their name, class, or ID.

Type Selector

This selector applies to all HTML elements of a specific type. For example, if we want all the paragraphs on our page to have green text color, we can use a type selector.

css

"This type selector selects all p elements, i.e., paragraphs, and applies green text color to them."

Class Selector

A class selector applies styles to any element that has a specific class. Classes are very useful when we want to apply the same style to multiple elements but not all elements of a certain type.

css

"This class selector selects all elements with the class button, regardless of their HTML type, and applies a blue background and white text to them."

ID Selector

An ID selector is more specific than a class selector and is used to target a single element on the page. Each ID must be unique within an HTML document.

css

"This is an ID selector. It selects an element with the unique ID header and applies a gray background and font size of 20 pixels to it."

Combining Selectors

We can combine selectors to target elements more precisely. For example, we can apply a style only to elements with a specific class that are also of a certain type.

css

"Here, we combine a button type selector with a primary class selector. It will only apply to buttons that also have the primary class, giving them a red background and white text."

Pseudo-Classes

Pseudo-classes allow you to select elements in a specific state. One of the most common pseudo-classes is :hover, which applies when the user hovers over an element.

css

"Here, we use the hover pseudo-class. It applies the color orange only when the user hovers over a link, represented by the a element."

Other Useful Pseudo-Classes

:focus: Applies when an element, such as a form field, is active or focused.
```
css
```
"This CSS rule applies a blue border when the input field is in focus, i.e., when the user is typing in it."
:nth-child(n): Selects the nth child of its parent.
```
css
```
"We use nth-child to select the second list item, li, and apply a red color to it."

Pseudo-Elements

Pseudo-elements allow you to style specific parts of an element. For example, you can add content before or after an element using ::before and ::after.

css

"In this example, we use the before pseudo-element to add the word Note before each paragraph. Additionally, we apply a bold style to it."

Specificity in CSS

When multiple selectors target the same element, CSS uses specificity to determine which rule to apply. Specificity depends on the type of selector used. Here is a list of common selectors, from highest to lowest specificity:

ID selectors (#id)
Class selectors (.class)
Type selectors (HTML tag)

For example, if two CSS rules target the same element, such as a paragraph, but one uses a class selector and the other a type selector, the rule with the class selector will take precedence.

css

"In this case, if a paragraph has the warning class, the text will be red. Although the p rule sets the color to black, the warning class has greater specificity and overrides the style."

Conclusion

In this chapter, we covered the different types of selectors in CSS and how they can be used to effectively apply styles to HTML elements. Selectors are a powerful tool for controlling which elements receive styles, and understanding their use is crucial for writing efficient CSS. In the next chapter, we will learn about the box model in CSS, which is key to understanding how elements are laid out on the page.

Back to previous chapter

Mark as read and continue

Ask me anything