Target div that has a class and an id

HTML & CSS
1

Hi,

I have the following markup:

<div calss="tab-container">
<div id="tab1" class="tab-content">tab1</div>
<div id="tab2" class="tab-content">tab2</div>
<div id="tab3" class="tab-content">tab3</div>
<div id="tab4" class="tab-content">tab4</div>
</div>

I would like to apply some CSS to only the CLASS of div ID 4. Is this possible?

Thanks

2 
.tab-content#tab4{}

Notice no space. This denotes that the element must have the class AND ID.

3

Thanks!

4
Off Topic:

Just in case you’ve copied/pasted that code from your page, you should be aware there’s a typo in the first line: <div calss="tab-container">

5

Although Ryan’s answer is technically correct it should be pointed out that Id’s are unique. There is only ever one id of the same name on a page so there is no need to concatenate them with a class (unless you are using ids on multiple pages and changing their appearance via a local context).

#tab4{}

That’s all you need.

Note though that ids have more specificity than classes so the styles in the id will always win out.

To avoid specificity issues you could do something like this.

.tab-content{color:blue}
[id="tab4"]{color:red}
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.