1

Consider the following style...

.fleft { float: left; margin-right: 15px; }

Now consider these div's:

<div class="fleft"></div>
<div class="fleft Shadow"><div style="position: relative; left: 15px;"></div></div>

The text is pushed 15 pixels to the right of each. The problem is the inner div in the second one, which is offset 15 pixels to the right by absolute positioning. This results in 0 margin between the two divs and the surrounding text.

Is there a way to write a style for TWO classes? I tried these, but they don't work:

.fleft .Shadow { margin-right: 30px; }

2 Answers2

3

Yes, just don't put a space between them:

.fleft.Shadow { margin-right: 30px; }
      |
 Space removed

With the space, you are selecting elements with the class Shadow that have some ancestor with the class fleft. Without it you are selecting elements with both classes.

Paul
  • 139,544
  • 27
  • 275
  • 264
-2

Yes

.fleft, .Shadow { margin-right: 30px; }

Eliminating the space shouldn't fix it unless the framework is controlling it somehow, For example, if you check out twitter bootstrap they concantanate classes with the space, As shown below

.login-box .login-links { font-size: .7em }

See FIDDLE

LOTUSMS
  • 10,317
  • 15
  • 71
  • 140
  • This does something entirely different: it applies to elements that have `.fleft` *or* `.Shadow`. – Jon Mar 12 '14 at 01:26
  • isn't that what he asked? " Is there a way to write a style for TWO classes?" the comma separates the classes, giving the same property to classes .fleft AND .Shadow – LOTUSMS Mar 12 '14 at 01:28
  • I added a fiddle to my answer – LOTUSMS Mar 12 '14 at 01:34
  • 1
    That's not my interpretation. And I don't think that anyone would need to ask the question you propose because there's a low-tech but very obvious solution: write the style twice, with a different single-class selector each time. But perhaps the OP can clarify. – Jon Mar 12 '14 at 01:36
  • I agree, it did seem a bit of a css 101 question. As you said, the OP can clarify – LOTUSMS Mar 12 '14 at 01:39
  • @LOTUSMS Your answer would defeat the purpose of him previously setting `.fleft { margin-right: 15px }`. It would override that. The OP wants to apply the style to elements with ***both*** classes, not to elements with ***either*** class. Thus, the solution is simply to remove the space, as in my answer. – Paul Mar 12 '14 at 01:42
  • See this update to your fiddle: http://jsfiddle.net/Paulpro/2RW34/3/ – Paul Mar 12 '14 at 01:45
  • We are both doing the same thing! He can either assign the same property to both classes my way or your way. Your way, he'll have to declare both in for it to work. Ok, whatever, his problem, not mine. He'll be the one with the bugs. – LOTUSMS Mar 12 '14 at 02:01
  • 1
    @LOTUSMS He's already declared both in it in his HTML in that he posted in the question. He's simply asking if there is a way to make a CSS selector which only applies to elements that have ***both*** classes. He definitely does not want the selector to apply to the element which has only the class `fleft`. With your solution, it will apply to that element. – Paul Mar 12 '14 at 02:08
  • It comes down to AND vs OR. He is asking if it is possible to do an AND in CSS, and you're giving him an answer that does an OR. – Paul Mar 12 '14 at 02:09
  • Sorry, I didn't realize my question was so confusing. I was looking for a style what would affect class Shadow only if it's paired with class fleft. In other words, apply a particular style only if there are two classes - fleft AND Shadow, in this case. –  Mar 13 '14 at 12:55
  • I stand corrected. Thank you fro clarifying – LOTUSMS Mar 13 '14 at 13:19