CSS - What is the meaning of this selector

Question

Hello all,

<div class="alert error">
      <p class="denied">adfafdadfadsf</p>
</div>

div.alert.error {
background:url("v3.png") no-repeat scroll 7px -643px #FFEEEE;
}

Does the selector "div.alert.error" mean the following?

select DIVs that contain both class alert and error.

Is there a different between

CaseI:   div.alert.error
CaseII:  div.alert .error
CaseIII: div .alert .error

Thank you

Answer 1

CaseI:   div.alert.error

A div with classes alert AND error. <div class="alert error">

CaseII:  div.alert .error

An element with class error that is a descendant of a div with class alert.

CaseIII: div .alert .error

An element with class error that is a descendant of an element with class alert, that in turn is a descendant of any div.

Answer 2

Let me use your cases as an example:

CaseI: Select each div that has the "alert" and "error" classes applied to it.

CaseII: Select anything that has a the case "error" applied to it that is inside a div with the case "alert" applied to it.

CaseIII: Select anything that has the case "error" applied to it that is inside something with the "alert" class and a div.

Answer 3

The selector means, as you guessed, "select divs that have both alert and error classes."

And yes, there is also a difference between the three cases (already outlined by others). I'd recommend having a look over the W3C CSS2 selectors document, pattern matching section.