user4439280
user4439280

Reputation:

Reference to an item in CSS file

I have multiple different "item" classes in my HTML. Now I want to style my "item" separately for each of my two category ID´s, but somehow all "item" gets the same CSS applied. I tried different classes and different ID´s but nothing works. All my "item"s have the "loaded-layout"(=ID) CSS styling.

<div class="base-container">
        <div class="carousel slide" id="carousel-articles">
            <div class="carousel-inner">
                <div class="item active">
                    <div class="col-md-4 col-sm-6"></div>

                    <div class="item"></div>

                    <div class="item"></div>

                    <div class="item"></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

And:

<div class="masonry" id="loaded-layout">
     <div class="container">
            <div class="item">
                <div class="well"></div>
            </div>

            <div class="item">
                <div class="well"></div>
            </div>

            <div class="item">
                <div class="well"></div>
            </div>
        </div>
    </body>
    </html>

My CSS:

#loaded-layout.item {
    width:350px;
    height:auto;
    font-size:11px
}

#carousel-articles.item {
color:#01DF01;
background:#01DF01
}

Upvotes: 1

Views: 74

Answers (2)

Mathew Thompson
Mathew Thompson

Reputation: 56449

You need a space between those selectors because you're looking for a child with the class item, otherwise it's looking for an .item with an ID of loaded-layout or carousel-articles:

#loaded-layout .item {
    width:350px;
    height:auto;
    font-size:11px
}

#carousel-articles .item {
    color:#01DF01;
    background:#01DF01
}

Upvotes: 2

Empx
Empx

Reputation: 93

#loaded-layout .item {
    width:350px;
    height:auto;
    font-size:11px
}

#carousel-articles .item {
color:#01DF01;
background:#01DF01
}

http://jsfiddle.net/k52eerfv/

Upvotes: 0

Related Questions