CODEWITHSUNDEEP
htmlcsscss-selectors
user1614862
user1614862

Reputation: 4149

Same css for multiple combinations of class selector not working

When I try to apply simple CSS for some divs based on css class selectors where different combination of selectors have the same css style, it is not getting applied. If I write this css separately for each selector combination then it is working. I cannot understand why it is getting failed. If my CSS selector works then "Left DIV | Left Score" should go to right side.

JSFiddle: https://jsfiddle.net/wf2y7m01/

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

div.team-info.team-pre-info.lpanel.Soccer 
div.team-info.team-final-in-info.lpanel.Soccer 
div.score-box.score-box-home.Soccer {
    float:right;
}

div.team-info.team-pre-info.rpanel.Soccer
div.team-info.team-final-in-info.rpanel.Soccer
div.score-box.score-box-away.Soccer {
    float:left;
} 

</style> 
</head>
<body>

<div style="color:#0000FF;width:500px">

  <div class="team-info team-pre-info lpanel Soccer" style="display:inline;">
      Left DIV 
    <div style="display:inline;"> | Left Score</div>
  </div>


 <div style="display:inline;">
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Middle DIV&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  </div>



<div class="team-info team-pre-info rpanel Soccer"  style="display:inline;">
<div style="display:inline;"> Right Score |</div>
      Right DIV 

  </div>
</div>

</body>
</html>

Upvotes: 0

Views: 121

Answers (2)

Shaggy
Shaggy

Reputation: 6796

Individual selectors should be comma separated, not space separated. The space character in CSS selectors is actually the descendant selector meaning that the following selector:

div.team-info.team-pre-info.lpanel.Soccer div.team-info.team-final-in-info.lpanel.Soccer div.score-box.score-box-home.Soccer

is looking for a div with the classes .score-box, .score-box-home & .Soccer that is a (grand)child of another div with the classes .team-info, .team-final-in-info, .lpanel & .Soccer which is itself a (grand)child of adivwith the classes.team-info,.team-pre-info,.lpanel&.Soccer`.

Upvotes: 0

sQer
sQer

Reputation: 1151

You need to separate selectors by comma (https://jsfiddle.net/dsp4w224/):

    div.team-info.team-pre-info.lpanel.Soccer, 
div.team-info.team-final-in-info.lpanel.Soccer, 
div.score-box.score-box-home.Soccer {
    float:right;
}

div.team-info.team-pre-info.rpanel.Soccer,
div.team-info.team-final-in-info.rpanel.Soccer,
div.score-box.score-box-away.Soccer {
    float:left;
}

More information: http://www.w3schools.com/cssref/sel_element_comma.asp

Upvotes: 2

Related Questions