Master CSS Selectors: Elements, Classes and IDs Explained

CSS, or Cascading Style Sheets, is the language we use to style and format web pages. One of the most fundamental concepts of CSS is selectors, which allow us to apply specific styles to different parts of our HTML. In this guide, we'll explore in detail the three basic CSS selectors: element, class, and ID selectors, so you can write efficient and maintainable styles.

Element Selectors: The Fundamentals of CSS

Before we dive into more specific selector types, we need to understand element selectors. These selectors are probably the most basic and straightforward type of CSS selector. They select HTML elements based on their tag name. For example:

p { color: blue; }

This selector applies the blue color property to all paragraphs <p> of our page. The simplicity of these selectors makes them the basis for starting to apply basic styles.

Universal and Element Type

• Universal: The universal selector * is used to apply a style to all elements on a page.

* { margin: 0; padding: 0; }

With this selector, all elements' default margins and padding are reset to zero.

• Element Type: Refers to using the name of the HTML tag, such as div, h1, a, etc.

h1 { font-size: 2rem; }

Here, all the titles h1 They will have a font size of 2rem.

Class Selectors: Versatility in CSS

Class selectors are incredibly useful and possibly one of the most used types of selectors in CSS. Unlike element selectors, class selectors allow you to assign the same style to various elements regardless of their type. The syntax of a class selector uses a dot . followed by the class name.

.button { background-color: green; colour: white; padding: 10px 20px; }

In your HTML, you can apply this class to any element you want to have the defined style:

Click me

Tips for Class Names

• Use names that describe the function or visual appearance of the element, such as .main menu o .highlighted-text.
• Prefers the use of hyphens to separate words in class names: .class-nameno .classname neither .class_name.

ID Selectors: Unique and Specific

ID selectors in CSS are similar to class selectors in that they can also be applied to any HTML element. However, there is a key difference: while a class can be used on multiple elements, an ID must be unique across the entire page. Used to select a single item that has a specific identifier. The syntax of an ID selector begins with a # followed by the ID name.

#header-main { background-color: #333; colour: white; }

Here, only the element with the ID head-main You will receive these styles:

<div id="cabezera-principal">
    <!-- Contenido de la cabecera principal -->
</div>

Importance of the Singularity

• An ID must be unique within an HTML page, meaning that the same ID should not be used in more than one element.
• IDs have greater specificity compared to classes, meaning that styles defined with an ID selector generally take precedence over styles defined with other selectors.

Combining Selectors for Greater Precision

As you become more proficient in CSS, you will encounter situations where you need to combine selectors to target elements more precisely. Here are some ways to do it:

Descending and Chaining

• Descending Selector: Space between selectors that applies the style to elements within a specific element.

#content .article { font-size: 1rem; }

• Chain selectors: Without space, combine multiple selectors to increase specificity.

input.error { border-color: red; }

Selectors of Attributes, Pseudo-classes and Pseudo-elements

You can also refine yourself further with attribute selectors, pseudo-classes like :hover, and pseudo-elements like ::before. They are more advanced tools that allow you to select elements in specific states or based on their attributes.

input[type="text"] { border-color: blue; } a:hover { color: red; } p::first-line { font-weight: bold; }

Good Practices with CSS Selectors

When working with CSS it's easy to overcomplicate things with very specific or redundant selectors. Here are some good practices to keep your styles efficient and easy to maintain:

• Use element selectors for global and base styles.
• To modify the appearance in multiple places, use classes.
• Reserve IDs for unique elements that do not share styles with other elements.
• Keep your CSS rules as unspecific as possible while still selecting the elements you want. This makes your code more flexible and easier to maintain.
• Consider using style writing methodologies such as BEM, OOCSS or SMACSS to structure your CSS in a consistent and semantic manner.

To learn more about good practices and delve into the fascinating world of web development, do not hesitate to visit my blog NelkoDev or if you have specific queries, contact me via my contact page. It will be our pleasure to assist you on your web development journey!

By mastering CSS selectors and understanding when and how to use each one, you will be well equipped to create visually stunning and perfectly structured web pages. Remember that practice is the key to perfecting your skills, so keep experimenting and learning!