Need help with CSS selector

dlearman1
dlearman1 used Ask the Experts™
on
I am trying to use a media query to change the color of the text "PRICE". But I'm having a problem finding the proper CSS selector to address .brandPrice.

HTML
<nav class="navbar-fixed-top">
                            <div class="containerFullBleed">
                                       <div class="rowFullBleed header">
                                             <div class="col-sm-12 text-center">
                                                  <p  class="logo"><span class="brandPrice">price</span><span class="brandLearman">learman</span>
                                                  </p>
                                             </div>
                                        </div>
                            </div>
                            <div class="containerFullBleed" id="brandHeader">
                                  <div class="rowFullBleed">
                                       <div class="col-sm-12">
                                            <p class="headerText  text-right">Full Site Coming Soon!<span class="paddingLeft50">Contact Us</span></p>
                                      </div>
                                  </div>
                            </div>
                      </nav>

Open in new window


Maybe something like: nav ~ p span .brandPrice

Help would be greatly appreciated
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
View Solutions Only
MontoyaProcess Improvement Mgr
Commented:
are you saying that you cant just hit it directly?

.brandPrice {
  color: blue;
}
dlearman1

Author

Commented:
The direct approach doesn't work. Not sure why?

Check out a jsFiddle at: https://jsfiddle.net/midnightCabbie/4cm5udL0/8/

Thanks
carloselfaite
Commented:
here working
http://recordit.co/BWOLpOrSlO
it seems like @screen-xs-max is not linked.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Find out now!
dlearman1

Author

Commented:
I will keep working on this.  Your example does work, but has problems when using the Bootstrap media query (this was imported as an external resource in the fiddle example).  

I don't think the issue is with Bootstrap media query because other modifications (change the footer background color, for example) do work as expected.

I'm not a jsFiddle expert and their documentation is thin.  Maybe its possible that I haven't successively loaded bootstrap.min.css. But still, it isn't working in my code either.

My thought is that it must be some kind of convoluted selector that's required.
carloselfaite

Commented:
have you tried $screen instead of @screen?
dlearman1

Author

Commented:
I need to stay within the Bootstrap framework, so no I haven't tried modifying the media query.
Commented:
OK I have tracked down the problem. My less files were being compiled to the wrong css... the right name but wrong directory.
dlearman1

Author

Commented:
I'm not giving any points to my solution. Just commented in case others find tis useful in the future

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial