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

CSSBootstrap

Last Comment

dlearman1

8/22/2022 - Mon

SOLUTION

Montoya

1/23/2016

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

GET A PERSONALIZED SOLUTION

Ask your own question & get feedback from real experts

Find out why thousands trust the EE community with their toughest problems.

dlearman1

1/23/2016

ASKER

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

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

Thanks

SOLUTION

carloselfaite

1/23/2016

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

GET A PERSONALIZED SOLUTION

Ask your own question & get feedback from real experts

Find out why thousands trust the EE community with their toughest problems.

dlearman1

1/23/2016

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

1/23/2016

have you tried $screen instead of @screen?

Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!

James Murphy

dlearman1

1/23/2016

ASKER

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

ASKER CERTIFIED SOLUTION

dlearman1

1/26/2016