Coding Newbie

CSS SELECTORS

What are CSS Selectors and how do they work?

CSS Selectors may just be the most essential part of CSS you should truly understand. Selectors are in fact the logic behind style, and are the way to connect styling with the structure of your web page.

In this post we will talk about what CSS selectors are actually, and how do they work?

What are CSS Selectors?

CSS Selectors are used to target specific HTML elements of the web page and apply desired style on them. With proper use of selectors, we can make code more efficient and have better control over website elements.

What types of selectors do we have?

There are many different ways to select elements. Basic ways to achieve this are:

  • Using type of an element
  • Implement classes
  • Using id
  • With universal selector
  • And using pseudo elements

Element Type CSS Selectors

The most common way to target some element in CSS is to use the type of an element. In order to style some HTML element, you just use its tag in CSS:

HTML element type CSS Selectors

We can target div, paragraph, link, button, or any other HTML element.

The problem here is that this kind of styling is not very specific. With the code above, we have colored all the paragraphs in the document with green color. More specific way is to use the element’s tag combined with parent element’s tag.

For example, we can say we want to color all the paragraphs within the div, and not all the paragraphs in a document:

CSS selectors using parent HTML element tag

This is more specific, as we have colored all the paragraphs within the div, and not throughout the entire document.

However, this is not good practice as our code gets more complicated. We will have multiple divs, with multiple paragraphs, and we want to be able to customize them all separately.

Better practice is to use id and class selector.

Class CSS Selectors

A class selector targets all the elements with specified class.

For example, if we mark several paragraphs with the class “highlight”, we apply the same style on each of them:

Class CSS Selectors

Using classes allows us to diversify elements and achieve more control over the style of our webpages.

However, more specific way to style elements is to use the id.

Id CSS Selectors

The id is used to mark unique elements, and once used id should not be used again in the same document.

The style for used id is more specific and it is important to note that if one element has both a class and an id, and the same CSS properties are used (for example, both class and id have different font-sizes or colors declared), id styling will have an advantage over class styling as it is more specific.

Id CSS Selectors

As seen in example above, third paragraph has both a class and an id. However, being an id is more specific, background color of mentioned paragraph will be red.

Note: Good coding practice is to use classes for mutual, same styling rules, and declared ids when there is need for specific, unique style.

Universal CSS Selectors

Besides the mentioned selectors, we also have a universal selector.

Universal selector is the least specific selector from them all, and its symbol is asterisk ( * ).

If used, the universal selector targets all the elements in the document. Most common use is to apply some general styling rules when needed. For example, developers tend to often use it to remove padding and margin from all elements and give them a value of 0, in order to get more control over the elements’ spacing.

Pseudo CSS Selector

Another selector which is increasingly used in modern CSS practice is the use of pseudo selectors.

Using pseudo selectors opens new styling possibilities, especially when it comes to animations and effects.

Which CSS Selector to use?

Which kind of CSS Selector to use completely depends of your code and document structure. If you need to apply same styling to several elements, you will use more general selectors (universal, element type, classes). On the other hand, if you want to target specific element with unique styling, you will definitely use id as your selector.

It is also possible to group selectors of the same styling together, in order to write less code and make it more efficient. We can apply the same styling on different element types, classes, id, by separating them with coma, as seen in the example below.

Multiple CSS Selectors

Conclusion

Understanding CSS selectors is essential to be able to have better control over your webpage design. If you target HTML elements with proper CSS selectors, you will achieve more simpler code, that will be more effective.

You have a wide range of CSS selectors at your disposal, more general selectors like classes and html elements type, as well as more specific selectors as it is an id. The proper coding practice is using the combination of selectors, in order to achieve greater level of specificity when needed.

Having selectors that are more specific will lower the possibility of breaking your styling if your HTML code gets more complicated. If you wish to check the level of specificity of your CSS styling rules, you can use the online tool called Specificity Calculator.

If you wish to learn more about CSS and why CSS is important language to understand, you can read it in the article What is CSS and why is CSS so important?

%d bloggers like this: