CSS: Selectors, Element, Class, and ID - Explained

So from the last few articles, we are discussing CSS and also we have discussed the basic CSS statement which starts with selectors. So let us see what is selectors?

Choose an element that you want to style and it all starts with selectors. There are different kinds of selectors like an element selector because it targets your style based on the element type itself. That is the most basic selector there is, by using the element type like p.

The problem with element selectors is that you might not want to turn all your paragraph’s blue or red or any other color. What if you have 3 paragraphs and you want one of them to be red. The element type is an identifier, but in this, it is too general.

For Ex: – Assume that there is one website. Consider that there are few sections and one of them has a white background and the other one is beige and consider that there are divs for changing the color. Now, in this case, the developers needed to be more specific. They should have selected the elements based on other kinds of identifiers like classes and ID.

The class is the most common and then the developers should have a wrapper on one and highlight on other and thus if you click on div with a highlight on it, you will see that class has a style that includes beige as a background color.

So let us try to do it one by ourselves. Let us say we have 5 paragraphs and consider that you want to alternate between dark and light. In other words, we can say that you want to reuse a style for multiple elements. So, in this case, you can use a CLASS selector.

The syntax for writing a CLASS selector is: Write the name of your class, it could be anything that you want, Just can’t have spaces and some special characters, say ALTERNATE. and put a dot (.) in front of it. You might be wondering why put a dot in front of it? i.e. .alternate. It is just a syntax that you have to remember which tells the browser that this is a CLASS selector. Then you have to add the class to your element in HTML. This means select all the elements that have a class attribute and the value is alternate.

As follows :

<body>

This is a test paragraph1″

This is a test paragraph2″

This is a test paragraph3″

This is a test paragraph4″

This is a test paragraph5″

</body>

Thus let us see: in above example we are trying to give dark and light effect to 5 paragraphs. So we have added “dark”, “light”, “dark”, “light”, “dark” classes to them. Then added a link to a file.

For Ex: test.css file as follows:

<head>

</head>

also made a classes in test.css file

dark

{

background color :black;

color :white;

}

light

{

background-color : white;

color: black;

}

So here you can see that the dark class has a background color black and color that is the text color white and light class has a background white and the text color black.

If you want you can add padding of any pixel for all p tags, for seeing it easily.

Thus, when you open this file you can see we are alternating between these two styles right? So what is more important about it is that you are reusing the dark and light as much as you want. You can basically change any of them. If you want to change the second one to dark, you can do that and this is how you can see reusability.

Now let us see ID selector’s, as we do not use them much. ID attributes are specific to one element only. If you have a style that you want to apply to only one element, for some reason, then you can add an ID to that element and then use ID selector in CSS to style it. ID selectors are just like CLASS selectors, except you put a “#” in front of the name instead of the dot (.). That becomes the CSS selector for the element with that ID. So let us try it with the following example:

Let’s say in the above example we have only two paragraphs and we add ID for one paragraph only and leave another one as it is, then the syntax will be as follows :

<body>

This is test paragraph 1

This is test paragraph 2

</body>

Note: – Check that you cannot have spaces in my-blue-paragraph if there is a space means something and suppose there is our previous link file with name test.css which contains my-blue-paragraph function as follows:

#my-blue-paragraph

{
color : blue:

}

and

{

color: red;

}

So let us check, You will see that the other paragraph which doesn’t have any classes or ID’s on them is defaulting to red and the first paragraph turns blue. That is the ID for you.

The problem with ID is that it is limited to only one element. Remember ID’s cannot be shared between elements so you cannot reuse your ID for multiple elements.

So People try to stay away from them. They do have a purpose but not right now. So those are the 3 basic selectors – Element, Class, and ID.

“Element” to style the elements of that type. ID to target only one specific element and class to reuse for multiple elements.

Visit – Hostdens

Best Web Hosting Company In USA

Vishwajit Kale

Vishwajit Kale blazed onto the digital marketing scene back in 2015 and is the digital marketing strategist of Hostdens, a company that aims to provide reliable web hosting solutions. Vishwajit is experienced in digital and content marketing along with SEO. He's fond of writing technology blogs, traveling and reading.