CODEWITHSUNDEEP
htmlcssless
FullStackDeveloper
FullStackDeveloper

Reputation: 968

How to access a nested css class

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.

Upvotes: 0

Views: 4833

Answers (4)

Joe Lissner
Joe Lissner

Reputation: 2462

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>

Upvotes: 2

Jon
Jon

Reputation: 2671

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.

Upvotes: 0

Chrisstar
Chrisstar

Reputation: 646

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

Upvotes: 1

Our_Benefactors
Our_Benefactors

Reputation: 3539

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.

Upvotes: 0

Related Questions