CODEWITHSUNDEEP
cssbackground-color
Deeptechtons
Deeptechtons

Reputation: 11125

CSS style rule for child elements

For a structure like below

<div class="container">
<div class="headers">
  <div class="header"></div>
  <div class="header"></div>
  ...
</div>
<div class="contents">
  <div class="content"></div>
  <div class="content"></div>
  ...
</div>
</div>

I am applying a css style like below but seems the background color gets applied only to the headers and not the content(Style is applied during hover event)

.container .header,.content{background-color:#55bbee;font-weight:700;color:#fff}

I am certainly sure it's a mistake with the selector, but where is the mistake puzzles me.I could do this and work happily but how to do it in single line

.container .header{background-color:#55bbee;font-weight:700;color:#fff}
.container .content{background-color:#55bbee;font-weight:700;color:#fff}

Upvotes: 0

Views: 1593

Answers (4)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

The code given works just fine, if you have some content in the elements so that any background is shown in the first place.

The problem is elsewhere, in the parts of code not shown.

Upvotes: 0

Ali Demirci
Ali Demirci

Reputation: 5442

.container .headers .header, 
.container .contents .content{background-color:#55bbee;font-weight:700;color:#fff}

Upvotes: 0

bekay
bekay

Reputation: 1830

Of course:

.container .header, .container .content {background-color:#55bbee;font-weight:700;color:#fff}

Upvotes: 0

Dennis Traub
Dennis Traub

Reputation: 51634

As far as I know you can't group selectors. You have to reference .container twice

.container .header, .container .content { 
  background-color:#55bbee; font-weight:700; color:#fff
}

Upvotes: 7

Related Questions