All geek questions in one place

Combining CSS classes into an element

This might be the dumbest question I've ever done, but why doesn't the text below appear in red?

<html> <style> .c1 .c2 { color: red; } </style> <body> <span class="c1 c2">This should be red</span> </body> </html>

Edit: I want to map elements containing both classes c1 and c2, as above, no less.

+4
source share
6 answers

.c1 .c2 corresponds to the c2 element inside the c1 element, just as the html body corresponds to the body element inside the html element. Delete the space corresponding to the element with two classes:

 .c1.c2 { color: red; }
+9
source

It should be .c1.c2 . The way you wrote it is c2 INSIDE a c1 .

+1
source

The .c1 .c2 really means an element with class c2 inside an element with class c1 .

To get the desired result, change the selector to .c1.c2 , which will correspond to the elements of both styles.

+1
source

If the intended value of your CSS should match "an element with c1 and c2 in its list of classes," then that could be .c1.c2 . This selector ( .c1 .c2 ) means "an element with class c2 that is directly inside an element with class c1 ".

Edit: for completeness, to match an element with at least one of the classes c1 and c2 , you should use .c1, .c2 . Thus, the space refers to the structure of the document, the space is not equal to "and", but a comma "or".

+1
source

Since .c1 .c2 selects the element c2 that is the descendant / descendant of the element c1 .

What would you like:

 c1, c2 {color: red; }

In response to a comment from OP

To display only elements with both classes:

 c1.c2 {color: red; }
0
source

Do you need a comma after .c1?

0
source

Source: https://habr.com/ru/post/1309598/

More articles:


All Articles