CODEWITHSUNDEEP
htmlcssclass
Margate
Margate

Reputation: 421

CSS class naming different?

I am working with the TN3 gallery (jquery slide show) and tried to change a class name to one that I found easier to understand. Thing is the class name that is within the div is different than the class name that controls it in the .css file? I am confused as I have never seen this before? I have only ever named a div class the same name as the class in my css code? Example is here:

<div class="tn3 description">

and in the .css file the class that controls this div is:

.tn3-image-description{Code here}

So my question is how can a differently named class work??? For me I understand the following:

<div class="description">
.description{Code here}

Interesting and I am keen to understand how this works as I have not seen things done this way before!

Upvotes: 1

Views: 82

Answers (2)

Daniel Cheung
Daniel Cheung

Reputation: 4819

Classes Are Only Conditions

<div class="a b"></div>

<style> 
    .a {color:blue;} /*The style only need to match a element with class "a"*/
    .a.b {color:red;}  /*The style need to match a element with class "a" AND "b"*/
</style>

Turns out that .a.b has overwritten .a and the div's text is in red.

e.g. no.2

<div>
    <div class="c x"></div>
    <div class="c"></div>
    <div class="x"></div>
</div>

using .c.x {} will only style "c x"

Upvotes: 1

ek9
ek9

Reputation: 3442

This div is using multiple (2) separate classes: tn3 and description.

Also check if any of the other CSS files are imported in the original css. This is usually done with @import url("another.css"); syntax, so you can search for @import statements.

Upvotes: 1

Related Questions