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?

Solution 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.

Solution 2

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>
  

Solution 3

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>.

Solution 4

Here is a detailed explanation for your question.

From: www.itsmesharath.in

Solution 5

.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

View more solutions

Comments

[sobelito]

thanks, didn't realize I could not have spaces after the periods

[Marko Francekovic]

You can have spaces after the periods but then it has a different meaning. If you place a space behind the period it will select the nested item with the given class, and if you have it without the space it will select the element which has all of those classes.

[Trilok Pathak]

Well explained. Thanks !

[Yohanim]

Good explanation here

[Dani]

Can I put .general-div on one line and .special on the next line and it will count as if they are connected?

[Marko Francekovic]

If you want to do something like <div class="general-div"><div class="special"></div></div> Then you could access the .special div like .general-div .special { <some css definitions>}