Targeting empty classes

Question

I'd like to apply the green background to paragraphs with classes and the red one to all the others. I've made it half way through but still struggling with empty classes class="":

p {background:green}

#test p:not([class]) {
  background: red;
  color: #fff;
}

<div id="test">
  <p>This should be red</p>
  <p class="abc">This should be green</p>
  <p class="newname">This should be green</p>
  <p class="">This should be red</p>
  <p class="anothername">This should be green</p>
  <p>This should be red</p>
  <p class="">This should be red</p>
</div>

Fiddle

Anyone knows a way?

yep. understood. If possible, will include snippet in my questions in feature. — Suresh Ponnukalai, Jan 19 '18 at 13:03

score 6 · Accepted Answer · answered Jan 19 '18 at 10:45

You can target a p with an empty class like this...

p[class=""] {
    ...
}

body {
  font-weight: 700;
}

p {
  background: green
}

#test p:not([class]),
#test p[class=""] {
  background: red;
  color: #fff;
}

<div id="test">
  <p>This should be red</p>
  <p class="abc">This should be green</p>
  <p class="newname">This should be green</p>
  <p class="">This should be red</p>
  <p class="anothername">This should be green</p>
  <p>This should be red</p>
  <p class="">This should be red</p>
</div>

ahh...simple. How can i miss this one? Thanks. – Suresh Ponnukalai Jan 19 '18 at 10:48 — Suresh Ponnukalai, Jan 19 '18 at 10:48

score 1 · Answer 2 · answered Jan 19 '18 at 10:49

1

I used #test p[class=""] i hope thats what you wanted.

body{
  font-weight:700;
}
p{background:green}

#test p:not([class]) {
  background:red;
  color:#fff;
}

#test p[class=""]{
  background:red;
  color:#fff;
}

answered Jan 19 '18 at 10:49

Pedro Bauer

19
1
6

Targeting empty classes

2 Answers2