Avatar of dlearman1
dlearman1
Flag for United States of America 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
CSSBootstrap

Avatar of undefined
Last Comment
dlearman1

8/22/2022 - Mon
SOLUTION
Montoya

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

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

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

Thanks
SOLUTION
carloselfaite

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

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?
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

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

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
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
dlearman1

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