css class definition with multiple identifiers

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

In CSS with the .className selector you can define the properties for every element with "className" class. Every element could have more classes. The meaning of a selector with more classes depends on how you combine them in your declarations:

• .class1.class2 will match only the elements that have both of them classes defined.

  .class1.class2 { background: red; }
  <div class="class1 class2"></div>
  

• .class1, .class2 will match the elements with .class1 or .class2

  .class1, .class2 { background: yellow; }
  <div class="class1"></div>
  <div class="class2"></div>
  

• .class1 .class2 will match only the elements with class2 within elements with class1.

  .class1 .class2 { background: blue; }
  <div class="class1">
      <div class="class2"></div>
  </div>
  

Answer 2

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.

Answer 3

.theme-light.slider-wrapper just means that it has both classes. In the HTML it could look like this:

<div class="theme-light slider-wrapper"></div>

As for the ID, there's no reason that an ID in the HTML should have to be referenced in CSS

Answer 4

How to use double classes, like <div class="name1 name2"></div>?

You div has to classes name1 and name2 (see live demo).

---

What about .theme-light.slider-wrapper?

That means your element has to have both theme-light and slide-wrapper classes (see live demo).

It is good for more elements. You want some elements to have gray background. No problem! Add them class gray and define css:

.gray {
   background: #ddd;
}

Also you need some elements have red text. Define red-text class with css:

.red-text {
   color: red;
}

And the end your paragraph has gray background and red text. Just add both gray and red-text classes like this <p class="gray red-text">Lorem ipsum</p>.