-1

Similar to this question, I just can't get the syntax correct. wildcard * in CSS for classes

I basically need to make this into a "wildcard" statement:

.et_pb_tab_0 td:hover{
    background: #000 !important;
}
.et_pb_tab_2 td:hover{
    background: #000 !important;
}
.et_pb_tab_3 td:hover{
    background: #000 !important;
}
etc....

here's what I tried:

div[class*="et_pb_tab_"], div[class^=" td:hover"]{
    background: #000 !important;
}

But it acts as if it's ignoring the "td:hover" section and changing the background of the et_pb_tab_* instead of the td inside when hovered.

Santosh Kumar
  • 1,756
  • 15
  • 24
Dylan Grove
  • 493
  • 1
  • 7
  • 17
  • 1
    It is doing exactly what you are telling it to do with the CSS selector `div[class*="et_pb_tab_"]`. As for `div[class^=" td:hover"]`... Do you actually have a **class** called `td:hover`? – FluffyKitten Oct 24 '17 at 19:11
  • 1
    remove the comma and make the second td:hover – FluffyNights Oct 24 '17 at 19:14
  • This is why terminology is so important and why folks on Stack Overflow are so picky about it. Many people call selectors or rulesets "classes", but "class" has a very specific meaning and trying to apply it to things that it's not will result in situations like this. – BoltClock Oct 26 '17 at 03:05

1 Answers1

4

If you intend to select all tds on hover which are child elements of elements having one of these three classes, it should be: 

div[class*="et_pb_tab_"] td:hover{
    background: #000 !important;
}

i.e. no comma after the class selector, and no class as a child element, but simply td with :hover.

BTW: You didn't write that the parent is a DIV, but I presumed that from the code in your question. If not, use * instead of div

Johannes
  • 64,305
  • 18
  • 73
  • 130