asked on

Need help with CSS selector

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

SOLUTION

Montoya

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

dlearman1

ASKER

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

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

Thanks

SOLUTION

carloselfaite

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

dlearman1

ASKER

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

have you tried $screen instead of @screen?

dlearman1

ASKER

I need to stay within the Bootstrap framework, so no I haven't tried modifying the media query.

ASKER CERTIFIED SOLUTION

dlearman1

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

dlearman1

ASKER

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