How to refer to prefixed CSS class?

Question

For legacy reasons, my CSS class is has a .x prefix:

.x input.myclass {
  background-color: red;
}

I'm not familiar with this syntax, how can I use this class in an HTML element? None of the below work:

<input type='text' class='myclass'>
<input type='text' class='x myclass'>
<input type='text' class='.x myclass'>
<input type='text' class='.x.mylcass'>
<input type='text' class='x.mylcass'>

that's a descendant selector. Please spend more time researching CSS syntax. — zzzzBov
– zzzzBov, Commented Jul 12, 2017 at 17:23
The only CSS prefixes I'm aware of are -webkit-, -moz-, -o-, and -ms- and what you have above isn't close to that. — j08691
– j08691, Commented Jul 12, 2017 at 17:28
@zzzzBov's is right: if you read, say, the MDN article on CSS selectors, you would have had the knowledge to answer your own question. Looking at your other css questions, it seems like there are others that you could also solve by reading some docs first. — alexanderbird
– alexanderbird, Commented Jul 12, 2017 at 17:35
@j08691 it's pretty normal for someone in a new technology to not know the right terminology. In the general sense of "prefix", yes, .x is a prefix. In the css sense, no, it definitely isn't. It seemed pretty clear to me what he was trying to communicate, though — alexanderbird
– alexanderbird, Commented Jul 12, 2017 at 17:38

Andy Aldo · Accepted Answer · 2017-07-12 17:29:05Z

2

.x input.myclass {
    // css goes here
}

The above CSS will affect any input tag with a class of myclass wrapped inside any containing block of class x

Therefore it will match the pattern below:

<div class="x">
    <input type="text" class="myclass" />
</div>

edited Jul 12, 2017 at 17:29

answered Jul 12, 2017 at 17:24

Andy Aldo

8901 gold badge10 silver badges24 bronze badges

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

Collectives™ on Stack Overflow

How to refer to prefixed CSS class?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related