Do not miss this exclusive book on Binary Tree Problems. Get it now for free.

In this article, we have explained the idea of Selectors in HTML and Selectors in CSS. This involves id and class selectors along with code examples.

1. Selectors in HTML (Hypertext Markup Language) file

Figure 1 is an example of the HTML file, containing two headings tags (h1 and h2) and paragraphs (p), the last with two selectors (id and class).

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Selectors</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
    
<h1 id="title">How to use the Selectors?</h1>

<h2 class="subtitle">Why are the selectors important?</h2>
<p class="introduction">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p class="content">Eum eligendi beatae iste corrupti labore magni ullam sit perferendis eaque impedit.</p>

<h2 class=subtitle>Some Examples</h2>
<p class="introduction">Lorem ipsum dolor sit amet.</p>
<p class="content">Eum eligendi beatae iste corrupti labore magni ullam sit perferendis eaque impedit.</p>
    
<p id="test" class="introduction">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum eligendi beatae iste corrupti labore magni ullam sit perferendis eaque impedit, placeat, fugiat iure excepturi!</p>
    
</body>
</html>

Figure 1. HTML file with id and class selectors.

According to the W3C (The World Wide Web Consortium), id selector cannot repeat itself. If heading h1 has an id selector title, no other selector can have the same id title.

However, different tags can have the same class. In Figure 1, headings h2 will have the same stylization and class "subtitle".
For the paragraph tag, were used class ("introduction" and "content") and id ("test").

As a general rule, the selector's naming is by their functionality. Both selectors can be used at the same tag, as seen in Figure 1 in the last paragraph (id test and class introduction).

2. Selectors in CSS file (“Cascading Style Sheets”)

In this case (Figure 2), the stylization will use an external file called, for example, style.css, indicated in the HTML file's head tag.

Figure 2. Path from HTML to CSS file.

In the absence of the path, no stylization will take effect on the page.
The id selector structure has a tag preceded by “#” (hash) and name. However, the tag is not mandatory.

Elements with the class selector are structured by “.” (dot) preceded of name (Table 1):

Table 1. Selectors's Structure.

HTML	CSS
<p id=name...	tag#name...
<p class=name...	.name...

Figure 3 is the generated CSS file for Figure 1:

*{
    background-color: #c0e7d1;
    text-align: center;
}

h1#title {
    color: #F03D30;
}
.subtitle {
    color: #4741F0;
}
.introduction {
    font-size: 20px;
}
.content {
    background-color: #EDD353;
}
p#test {
    background-color: #47ED8C;
}

Figure 3. Stylization using selectors.

Based on HTML and CSS files, was created the following page (Figure 4):

Figure 4. Page generated using selectors.

Note that the last paragraph has the styling of the introduction class with font-size: 20px (same of h2) and id test with background-color #47ED8C, differentiating it from the other elements.

3. Final Considerations

In the development of almost all pages, will be necessary a stylization, so that the user experience is the best possible.

Therefore, the use of selectors is essential when you want to style more efficiently. It allows that change made in a selector, modify all the elements that contain the same.

With this article at OpenGenus, you must have the complete idea of id and class selectors in HTML and CSS. Enjoy.

Which selectors to use: id or class?

Table of Contents:

1. Selectors in HTML (Hypertext Markup Language) file

2. Selectors in CSS file (“Cascading Style Sheets”)

3. Final Considerations