CODEWITHSUNDEEP
twitter-bootstrap
FatFingers
FatFingers

Reputation: 6897

bootstrap - using visible-phone to change CSS not working

CSS nob looking at bootstrap...

I assumed classes like .visible-phone, .visible-desktop, etc... were applied to the body tag. Looking in firebug that doesn't appear to be the case.

What I'm trying to do is change CSS settings based on .visible-xxxx, for example:

.ugly-color { color: red; }

.visible-desktop .ugly-color { color: green; }

<div class="visible-desktop">I see this text</div>

<div class="ugly-color">Why is this red and not green</div>

Does anyone know where the .visible-desktop is applied? as if it was the body tag, then ugly-color would be inside .visible-desktop

All input appreciated. Thanks!

Upvotes: 1

Views: 2457

Answers (3)

gjcounter
gjcounter

Reputation: 1

What you want is:

.ugly-color {color: red;}

.visible-desktop + .ugly-color {color: green;}

Upvotes: 0

ajiang
ajiang

Reputation: 1722

A space between selectors in CSS means the second is inside the first. So your CSS rule that selects .visible-desktop .ugly-color will only trigger when the .ugly-color is inside .visible-desktop. To select those with both classes, remove the space:

.visible-desktop.ugly-color { color: green; }

This W3 documentation details CSS selector syntax pretty well, just in case you need some more options.

Upvotes: 1

Brigitte Fellner
Brigitte Fellner

Reputation: 255

Because you .visible-desktop .ugly-color means that there are two elements in each other, like this it works: 

.ugly-color {color: red;}

.visible-desktop .ugly-color {color: green;}


<div class="visible-desktop">I see this text</div>

<div class="ugly-color">This is red</div>

 <div class="visible-desktop">
        <div class="ugly-color">
            why is red, and not green
        </div>
 </div>

Upvotes: 1

Related Questions