CSS is an essential tool for web developers. We use it to specify the appearance of HTML elements, their positioning on the page, and even responsive features of the page. So needless to say, as a web developer, you need to master CSS with all of its intricate details to be good at your job.

Basics of CSS are simple, but if you want to do something specific, you might come across difficulties. Changing one thing can lead to difficulties with other elements, and then you need to fix those as well. It can be a nightmare.

In this article, we’ll discuss selectors in CSS.

Selectors are basically how you ‘specify’ which HTML elements the CSS rules should be applied to. You can select elements by their type, for example specify that the CSS rule should apply to div elements. This is good, but it’s too general for complex applications. Most of the time you don’t want your CSS rules to apply to all elements of the same type.

CSS makes it really easy to specify elements for styles. Simply write the name of the element and then you can follow it with specific CSS rules.

Class selectors are a little more specific. Basically, you can define a style and give it a name. And any elements associated with that name will get the appearance specified in the style. Classes are set using the class attribute on HTML elements. In CSS, you define classes by preceding the name of the class with a dot. Also, people tend to write classes in a camelCase format. For example, if you want to define class with a name ‘special container’, CSS code would look like this:

.specialContainer {

                border: 2px solid yellow

}

Finally, you can also specify styles for HTML elements by using the id. Similarly, elements can be assigned id values using the id attribute. Each element has unique id, so this is the most specific of all three types of selectors. id is useful when you want to style outliers, and to ensure that a specific element looks the way you want it to look, or is positioned where you want it to be.

Let’s finish this article by comparing three different selectors and their most appropriate use cases. I don’t like using element selectors, because they are too general. However, they have legitimate use cases, like when you want to style all paragraph elements in your web app, or want to give all containers some padding.

In my experience, class selectors are the most useful, and based on what I’ve seen, other web devs most commonly use classes as well. They give you the ability to define groups of elements and style them as needed. Also, each HTML element can have multiple classes. So you can do something like this: define a specific ‘look’, or specific ‘position’ you want the element to have, and store that in a class name. Then you can set this class to an HTML element, as well as other classes. Instead of having one rigid class that has all the rules, you have more versatile, larger number of classes, and apply them as needed.

Also, classes override general element selectors. You can use this to your advantage. For example, use element selectors for a more general rule, and then have a class for more specific styling. If you want some of the paragraphs to be styled differently from the general rule, simply apply the class.

Another great thing about styling HTML elements with classes is that JavaScript allows you to conditionally add classes. Frameworks like React allow you to add conditional styles to elements as well. Here’s a great article on adding classNames if condition is true in React.

Finally, id selectors are the most specific of all. They should only be used for outlier cases. In ideal scenario, you would not need to use id selectors at all. It should be said that id selectors override normal CSS styles.