Applying style to just one box

[Historical Forums User]

Hi guys.

I’m totally new to CSS so apologies if this sounds stupid. I have two boxes on two pages and have managed to change their look using one piece of CSS for both:

.note-info {
background: rgba(0, 0, 0, 0.7) !important;
border-left: none;
font-size: 30px;
line-height: 32px;
font-family: Arial,Tahoma,sans-serif;
height: 330px;
width: 310px;
color: #c6c6c6;
}

This looks great on the first box but I don’t want to apply the same look to the second. I understand there might be something I can do with hash-tags but I can’t seem to work it out. Can anyone help me?

[Jerba]

Here’s a quick example of the method @Atelierbram suggested above regarding additional classes.

http://codepen.io/Responsive/pen/EjraXj

[Paulie_D]

I understand there might be something I can do with hash-tags

What you are referring to is giving the element and ID

<div id="mybox" class="note-info"></div>

If you do that, you can select it directly in your CSS using the hash

#mybox {
 /* your styles here */
}

If you use the class as well, it will have the styles you have already applied but you can add more (or override them) by using the # selector as it has greater specificity.

That said, it’s considered better practice not to overuse IDs (which must be unique so you can’t use them more than once per page).

It might be better to add an additional class that make the changes you want.

<div class="note-info mynewclass"></div>

which you can then address with

.note-info.mynewclass {
 /* your styles here */
}

which would have the same effect as an ID and mean that your new extra class is re-useable.

[Author]

Posts