How to apply a CSS rule selectively?

Question

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?

Zach P · Accepted Answer · 2015-11-09 22:06:22Z

1

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.

answered Nov 9, 2015 at 22:06

Zach P

57010 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adam Buchanan Smith · Accepted Answer · 2015-11-09 22:49:15Z

1

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;}

answered Nov 9, 2015 at 22:49

Adam Buchanan Smith

9,4675 gold badges21 silver badges39 bronze badges

2 Comments

Eamorr Over a year ago

I was trying to apply the style display: none; to items matching md-menu-content.md-menu-bar-menu.md-dense .md-menu > .md-button:after and ZZZ How to do this?

Adam Buchanan Smith Over a year ago

Are they all separate elements or are they concatenated? Could you show me a snippet of the HTML? I know how to do it but it depends on how your html is laid out.

Adjit · Accepted Answer · 2015-11-09 22:06:12Z

0

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
}

answered Nov 9, 2015 at 22:06

Adjit

10.3k13 gold badges57 silver badges102 bronze badges

2 Comments

Eamorr Over a year ago

Eh, I want to apply the style display: none; to items matching md-menu-content.md-menu-bar-menu.md-dense .md-menu > .md-button:after AND ZZZ How to do this?

Adjit Over a year ago

md-menu-content.ZZZ this will apply a styling to any md-menu-content with the ZZZ class. If you do md-menu-content .ZZZ (with a space) that means any element with the class ZZZ that is a child of md-menu-content

Collectives™ on Stack Overflow

How to apply a CSS rule selectively?

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related