Why use # when you can use . in css?

Language Help General Programming
1

just a general question of something i’ve noticed.
why in some CSS do the selectors have a ‘#’ before them instead of using a period ‘.’ ?
e.g.
(in HTML) < div class=‘header’>
(in CSS) #header / instead of .header

when should i be using a # instead of a period?

2

In CSS, # and . have different meanings:

  • # is used to select elements by their id attribute. Each element in an HTML document should have a unique id. For instance, if you have an element <div id="header">, you can select it in CSS using #header.

  • . is used to select elements by their class attribute. You can have multiple elements with the same class. For example, if you have multiple elements <div class="header">, you can select all of them in CSS using .header.

So, when should you use # instead of .? You should use # when you want to select a single element that has a specific id. If you want to select multiple elements that share the same class, you should use ..

Here are some examples to illustrate the difference:

<!-- HTML -->
<div id="header">This is the header</div>
<div class="item">Item 1</div>
<div class="item">Item 2</div>

/* CSS */
#header {
 color: red;
}

.item {
 color: blue;
}

The # selector has a higher specificity than the . selector. This means that if there are conflicting styles, the styles applied by the # selector will take precedence over the styles applied by the . selector.

However, it’s generally recommended to avoid using id selectors where possible, because they can make your CSS less flexible and harder to override. Instead, you should use class selectors as much as possible

6 Likes
3

i have completed a few lessons where the same ‘class’ in HTML is then defined in the CSS with a period and then further down the CSS page it is defined with a hashtag. For example, HTML: < div class"top">
CSS: .top {width: 100px; height: 50px}
then further down the same CSS page: #top {display: flex background-color: whitesmoke;}.

i am confused as i thought the # was only used for elements with an ‘id’ tag and didnt need to repeat items in CSS?

4

I’ll try to simplify it better:

  • Class Selectors: In CSS, a period (.) is used to select elements with a specific class. For example, .top { width: 100px; height: 50px; } selects all HTML elements with the class “top” and applies the defined style.

  • ID Selectors: In CSS, a hash (#) is used to select an element with a specific ID. For example, #top { display: flex; background-color: whitesmoke; } selects the HTML element with the ID “top” and applies the defined style.

Here’s an example to illustrate the difference:

<!-- HTML -->
<div id="top" class="top">Hello, world!</div>

/* CSS */
.top {
 width: 100px;
 height: 50px;
}

#top {
 display: flex;
 background-color: whitesmoke;
}

In this example, the <div> element has both the class “top” and the ID “top.” CSS first applies the style of the “top” class, setting the width and height of the element. Then, CSS applies the style of the “top” ID, setting the element’s display to flex and the background color to whitesmoke.

It’s important to note that while an element can have multiple classes, it should have only one ID. Additionally, an ID must be unique on a page, whereas a class can be used on multiple elements. Therefore, an ID has higher specificity than a class, which means if an element has both an ID and a class, the ID’s style will take precedence.

1 Like
5

i appreciate your help but i dont think i explained it properly. nevermind.