Reputation:
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
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
Reputation: 93
#loaded-layout .item {
width:350px;
height:auto;
font-size:11px
}
#carousel-articles .item {
color:#01DF01;
background:#01DF01
}
Upvotes: 0