I have a nested css class:
.a {
b.c {
color: red;
}
}
How can I access to 'b.c' class?
I am using <p class="a.b.c"></p>,
but cannot work.
Thanks.
4 Answers
Your code:
.a {
b.c {
color: red;
}
}
Can be accessed via
<div class="a"> <!-- parent with class "a" -->
<b class="c">This text will be red</b> <!-- <b> tag with class "c" -->
</div>
Explanation
In less, when you nest as you are, you are saying that the nested rules only apply to elements that are inside an element that matches the selector of it's parent. The rule you wrote is looking for any <b> tag that has a class c which has a parent with class a
The CSS that would be output from your code would be
.a b.c {color: red;}
If you wanted to access one element, and as your broken HTML indicates, have the b be a class instead of an element selector, then you could make your LESS:
.a {
&.b.c {
color: red;
}
}
Can be accessed via
<p class="a b c">
This text will be red
</p>
Comments
For what I know, you can't have dots in class names. To assign multiple class names to an element, seperate them by a space.
<p class="a b c"></p>
You can now access them like this:
.a.b.c {
color: red;
}
Or like that:
.a {
&.b.c {
color: red;
}
}
Comments
To select any elements with classes "b" and "c" such as
<p class='a b c'>hello</p>
Use this selector which selects it because it matches classes b and c
.b.c {
color: red;
}
The . is used in CSS selectors, but in HTML don't use . in class names.
2 Comments
FullStackDeveloper
Where is a in your css define?
Our_Benefactors
Maybe I'm not understanding your question. There doesn't have to be a selector for 'a' in the css because there are other classnames that can be used to select that element. What exactly are you trying to accomplish?
Your less isn't currently written in a way to accomplish what you want. The b isn't considered a class but an element, so it wouldn't do what you need. You need to change it like this:
.a {
.b.c {
color: red;
}
}
But with this currently configuration, the only way to access it would be to do something like this <p class='a'><span class="b c">hello</span></p>.
If you want it to work like your example, then you should follow Chrisstar's answer.
Comments
.a. In HTML, it's like thisclass="a". Do you see the difference?