CODEWITHSUNDEEP
css
SooIn Nam
SooIn Nam

Reputation: 3171

how to apply css on only one class?

css

#inchannel li{
            width:179px;
            height:40px;
            margin:0px 0px 0px 0px;
            padding:0px 0px 0px 0px;
            font-size:17px;
            color:#999999;
            background:url(img/green.png) no-repeat 8% 50%,url(img/back_line.png);

        }

        .ichn0{
            width:179px;
            height:123px;
            margin:0px 0px 0px 0px;
            padding:0px 0px 0px 0px;
            font-size:17px;
            color:#999999;
            background:url(img/green.png) no-repeat 8% 18%,url(img/log_in_body.png),url(img/invite_button.png) no-repeat 60% 60%;

        }

html

<ul id="accordion">

<li>
    <a href="#" class="item category" rel="category"></a>
    <ul id="inchannel">
    <li class="ichn0"><img src="facebook/41403_1434825607_37944358_q.jpg"></li>
        <li><img src="facebook/48983_615523712_8495_q.jpg"></li>
        <li><img src="facebook/41621_717814907_4472_q.jpg"></li>
    </ul>
</li>

</ul>

I want to apply css on only one class but it isn't applied to one class it seems like inchannel css covers all. can any body tell me how to apply css on only one class? Any thought? Thank you.

Upvotes: 0

Views: 9030

Answers (3)

Nicole
Nicole

Reputation: 33197

  • #inchannel li — Applies to all li elements inside the #inchannel element (all of them, in your case.

  • .ichn0 — Applies to li elements with ichn0 class, regardless of what element they are inside. There is only one of these.

The reason why the first is taking precedent over the .ichn0 CSS is because of CSS specificity. The #inchannel li selector is more specific and therefore overrides the less-specific .ichn0 settings.

Changein .ichn0 to #inchannel li.ichn0 should fix your problem.

Upvotes: 0

Chris Sobolewski
Chris Sobolewski

Reputation: 12925

#inchannel li has much more specificity tham the class .ichno.

There are several ways to combat this.

  • Add !important to the properties of .ichn0

This is bad practice because you can overwrite user stylesheets like this, which are used for things like screen readers, etc.

  • Add an ID to the first li.

This is OK, but not the way I'd go about it, personally.

  • #inchannel:first-child

This is how I would go about it. In my eyes this is easiest to maintain across multiple pages.

  • Add a class per Damen's answer.

There's absolutely nothing wrong with this approach, either. I'm just a sucker for :psuedo selectors.

Upvotes: 0

Damen TheSifter
Damen TheSifter

Reputation: 911

use higher specificity 

#inchannel li.ichn0{
        width:179px;
        height:123px;
        margin:0px 0px 0px 0px;
        padding:0px 0px 0px 0px;
        font-size:17px;
        color:#999999;
        background:url(img/green.png) no-repeat 8% 18%,url(img/log_in_body.png),url(img/invite_button.png) no-repeat 60% 60%;

    }

Upvotes: 8

Related Questions