0

You may have multiple classes on an element separated by a space:

<div class="header contaminated">...</div>

and you can target that div using .header.contaminated selector.

That's fine when both classes are directly applied to an element. i want to target an element with CSS that has both styles, but one style comes from the parent:

Example

<div class="contaminated">
  <div class="header">...</div>
</div>

Normally i want to style a header as blue:

.header { background-color:  #99FFFF; }

But if a div is contaminated then i color the entire background red:

.contaminated { background-color: Pink; }
.contaminated.header { background-color: HotPink; }

Except i don't think the css selector syntax .contaminated.header is valid for "inherited" styles.

Note: The reason i don't think it's valid is because it doesn't work

Is it possible to target an element with CSS if it only contains two classes, and some of the classes are "inherited" ?

jsFiddle sandbox

Community
  • 1
  • 1
Ian Boyd
  • 246,734
  • 253
  • 869
  • 1,219

3 Answers3

4

This is basic CSS - separate the class names by a space, that implies/applies the cascade:

.contaminated .header { ... }

Anything wrong with that?

Cheers

Madbreaks
  • 19,094
  • 7
  • 58
  • 72
  • Ah... [back to basics](http://www.w3.org/TR/CSS1/#contextual-selectors). (Notice I'm linking to an ancient spec on purpose.) – BoltClock May 15 '12 at 17:39
  • I should inform that the cascade doesn't go from an ancestor to a descendant - it only works on a per-element basis, and what we're talking about here is in fact inheritance, a separate matter altogether. – BoltClock May 15 '12 at 17:45
  • @BoltClock Huh? Are you saying my answer is wrong? If not, what *are* you saying? Let's not confuse a very basic concept. – Madbreaks May 15 '12 at 17:48
  • I'm just saying you said "cascade" where you should *probably* have said "inheritance". I dunno. *-shrug-* – BoltClock May 15 '12 at 17:49
  • @BoltClock i read that before asking! Now that i read it again i....still can't find my answer in there! – Ian Boyd May 15 '12 at 18:08
  • And good god, if i had just randomly kept mashing i might have stumbled into it. i tried `+`, `#`, `,` before thinking i should *ask* rather than guess. In my defense [the css](http://www.w3.org/TR/CSS1/#contextual-selectors) spec doesn't mention being able to use `` to separate classes (only elements). – Ian Boyd May 15 '12 at 18:11
  • If you look at the newer specs you'll see something called a descendant combinator... – BoltClock May 16 '12 at 05:43
2

I'm confused as to your question, wouldn't this do it?

.contaminated .header { background-color: HotPink; }

Notice the space, saying "look for an element with a class of .header within an element with a class of .contaminated"

Paolo Bergantino
  • 480,997
  • 81
  • 517
  • 436
1
.contaminated>.header{}

will only target element header that are direct children of .contaminated

Simon Arnold
  • 15,849
  • 7
  • 67
  • 85