Question

I have just started learning CSS and have come across an example that I do not fully understand. I cannot describe it well which has made finding an answer difficult (I therefore apologise if an answer already exists that I have overlooked).

My question is regarding the following example:

.theme-light.slider-wrapper {
  background: #fff;
  padding: 10px;
}

I understand that classes in CSS are defined using the .name syntax which can then be used in tags like so:

<div class="name"></div>

I do not understand how the “double” declaration of .name1 .name2 works and how this would be used in a tag.

On a related note the example website that I was given uses an ID in a tag that does not exist in the stylesheet.. where else could this have been defined?

Answer 1

Maybe this use example will clear things up for you.

Imagine the following scenario.

You would have:

<div class="general-div">some stuff</div>
<div class="general-div special">some stuff</div>
<div class="general-div">some stuff</div>
<div class="extra-div">some stuff</div>
<div class="extra-div special">some stuff</div>

And lets say you want div’s to have the same attributes as follows:

.general-div {width: 300px; height: 300px; border: 1px solid #000;}

.extra-div {width: 200px; height: 200px; border: 1px solid #666;}

But you want the .general-div with .special class to have red background, and extra-div with .special class to have a blue background.

You would write:

.general-div.special {background-color: red;}

.extra-div.special {background-color: blue;}

Hope it clears up the use of situation in question.