CODEWITHSUNDEEP
css
Eamorr
Eamorr

Reputation: 10012

How to apply a CSS rule selectively?

I have the following in my css file:

md-menu-content.md-menu-bar-menu.md-dense .md-menu > .md-button:after{
    display:none;
}

And here's my HTML:

<md-menu-content class="ZZZ">
    Hello
</md-menu-content>

I have some Javascript (material design) that adds lots of stuff to the <md-menu-content> elements.

I would like to apply the above CSS to certain <md-menu-content> elements (only if they have the ZZZ class) and leave all others behaving as normal. I'm very stuck. Is this possible in CSS?

Upvotes: 0

Views: 488

Answers (3)

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9449

I think you are over thinking this, just use the css styling like you would any other time, and it works just fine. See fiddle: https://jsfiddle.net/pyexm7us/3/

HTML

<md-menu-content class="ZZZ">
    Hello
</md-menu-content>
<md-menu-content>
    World
</md-menu-content>

CSS

md-menu-content{background-color: red; color: white;}
.ZZZ{background-color: blue; color: white;}

Upvotes: 1

Zach P
Zach P

Reputation: 570

To apply the css that you want to all items of the ZZZ class, you should use code like this:

.ZZZ {
    //your code here
}

The . before the ZZZ signifies that it applies to items with the class ZZZ. This can be done with any class, as all you have to do is put a . (period) before the class name.

Upvotes: 1

Adjit
Adjit

Reputation: 10305

This is absolutely possible with CSS

To apply styling to elements with the same class simply use the prefix .

.ZZZ {
    //styling for elements with class ZZZ
}

If you want to work with id's then use the prefix #

#ZZZ {
    //styling for elements with the ID ZZZ
}

Upvotes: 0

Related Questions