CODEWITHSUNDEEP
htmlcss
Ricol
Ricol

Reputation: 377

Change color of div with several classes with CSS

I'm a CSS beginner trying to customise my WordPress blog by using a custom.css file.

I'd like to change the color of a div but this div have several classes :

<div class="container template-blog template-single-blog ">

If I use the following code will it change the background of all the divs with at least one of these classes or only the div with at least these 3 classes ?

.container .template-blog .template-single-blog { background-color: lightgreen; }

Upvotes: 1

Views: 11368

Answers (6)

random_user_name
random_user_name

Reputation: 26160

With your given markup:

<div class="container template-blog template-single-blog ">

This style:

.container .template-blog .template-single-blog  {
    background-color: lightgreen;
}

Will not affect anything. What that style declaration says is: "For all elements with the class container, that have a descendant element with the class template-blog that contain children with the class template-single-blog elements, change the background of the element with the class template-single-blog element.

You could change the background of your div simply with this:

.template-single-blog  {
    background-color: lightgreen;
}

Which will change all elements with the .template-single-blog class across the site, regardless if they have any other classes.

If you want to get more specific, you can do this:

.container.template-blog.template-single-blog  {
    background-color: lightgreen;
}

Which will change only those elements that have all three classes.

Upvotes: 0

jagmitg
jagmitg

Reputation: 4546

If you have a several classes associated to an element e.g. the <div>, those classes will target that div element only.

However, if your <div> classes are being used anywhere else, it will however, change the background-color to lime green.

If you want one class to target one element and your not going to be using it anywhere, then maybe consider ids (#unique).

If you want to target that one element then consider doing the following:

.container.template-blog.template-single-blog {
    background-color: lightgreen;
}

Examples of usage: http://jsfiddle.net/kjLfq8b4/

div {
  margin-bottom: 40px;
}
#uniqueItem {
  color: red;
  border: 1px solid green;
}
.oneClass {
  background-color: blue;
  color: white;
}
.twoClass {
  padding: 10px;
}
.threeclass {
  text-decoration: underline;
}
.oneClass.twoClass.threeClass {
  height: 40px;
}
<div id="uniqueItem">This is a unique Item</div>

<div class="oneClass">This is one class</div>

<div class="oneClass twoClass threeClass">This is multiple classes</div>

Upvotes: 4

Cristian Cristea
Cristian Cristea

Reputation: 94

Will change nothing. You have selected the template-single-blog class in a markup like this: 

<div class="container">
  <div class="template-blog">
    <div class="template-single-blog">

    </div>
  </div>
</div>

Just change the background on one of the classes, will work if nothing overwrites it.

.template-single-blog  {
  background-color: lightgreen;
}

or better add a new class .background-single-blog { background-color: lightgreen; }

Upvotes: 0

Derek Morash
Derek Morash

Reputation: 56

To change the colour of all any div with one of these class names, you will want to add commas between the class names, like this:

.container, .template-blog, .template-single-blog  {
background-color: lightgreen;
}

Without the comma nothing will change.

Upvotes: 0

Asaf David
Asaf David

Reputation: 3297

Your CSS selector is actually like this: "class 'template-single-blog' which has an ancestor with class 'template-blog' which has an ancestor with class container"

The best option is to add a class to that div and make a CSS rule for that class:

.new-class {
  background-color: lightgreen;
}

If adding a class isn't an option, you should try saying "a div that has all of those classes". It is written like this:

div.container.template-blog.template-single-blog {
  background-color: lightgreen;
}

Upvotes: 0

dmonti
dmonti

Reputation: 488

Remove the spaces between classes names:

.container.template-blog.template-single-blog {
    background-color: lightgreen;
}

This will mean that this style will be applied only when an tag matches with all the three classes.

Upvotes: 0

Related Questions