Why the same CSS class twice in a row

Question

I saw the following line in a code:

.className.className {
   font-weight: bold;
}

Is there a reason to write this twice?

score 4 · Accepted Answer · answered Dec 15 '22 at 17:14

4

It is likely used to increase the specificity of the selector.

It would probably be better if it was rewritten to change the source order instead.

answered Dec 15 '22 at 17:14

Quentin

914,110
126
1,211
1,335

A colleague told me that this is a softer solution to `@important`. So I think you are absolutely right and that the css should rather be restructured. – Max Pattern Dec 15 '22 at 17:44

score 1 · Answer 2 · answered Dec 15 '22 at 17:11

1

Typo maybe. below is valid though.

All <li> elements with a class list that includes both "spacious" and "elegant"

For example, class="elegant retro spacious"

li.spacious.elegant {
  margin: 2em;
}

answered Dec 15 '22 at 17:11

pasindu

529
1
4
16

score 0 · Answer 3 · answered Dec 15 '22 at 17:11

0

It's a typo!
Technically this code will apply to an element with the following classes: "className" or "className". But because one match is enough and they are the same name it doesn't matter.

answered Dec 15 '22 at 17:11

André

1,602
2
12
26

score -1 · Answer 4 · answered Dec 15 '22 at 17:10

-1

Nope. Maybe just typo. It has no meaning on css.

answered Dec 15 '22 at 17:10

Finn

101
1
7

Why the same CSS class twice in a row

4 Answers4