Changing css on elements within specific pages

Question

I am trying to change the CSS on specific elements inside the page (since I need them to be different on specific pages) Trying to do this to no avail.

<script>
 $(document).find('#nav-icon span').css({
    'background-color': '#333'
 });

 $(document).find('.screen-nav li a').css({
    'color': '#fff'
 });

 $(document).find('.screen-nav li a:after').css({
    'background-color': '#fff'
 });
</script>

You should pass a different class to the body & then write the CSS above. I think this is a more better way. — Saurav Rastogi
– Saurav Rastogi, Commented Oct 17, 2017 at 5:35
I just want this applied on the index page only. However, my header.php page applies to all pages so I can't put it in the style sheets. So I would hardcode it into the index.php directly — user3550879
– user3550879, Commented Oct 17, 2017 at 5:51
Your code is running before DOM is ready and therefore need to be within $(document).ready({}).. — Iswar
– Iswar, Commented Oct 17, 2017 at 6:00

Iswar · Accepted Answer · 2017-10-17 05:56:07Z

1

However you are trying to find the html element from document which runs before DOM is ready. Therefore you need to bind you find function after DOM is ready and jquery script should be with in document.ready function and try to change css property from jQuery like this:

HTML

<nav class="screen-nav">
 <ul>
   <li><a href="#">AA</a></li>
   <li><a href="#">BB</a></li>
   <li><a href="#">CC</a></li>
   <li><a href="#">DD</a></li>
 </ul>
</nav>

JQUERY

 $(document).ready(function(){
   $('.screen-nav li a').css({
     "background-color": "yellow",
     "font-size": "200%",
     "color":"#000"
   });
 });

Working demo here

edited Oct 17, 2017 at 5:56

answered Oct 17, 2017 at 5:49

Iswar

2,34112 gold badges44 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rick Sanchez · Accepted Answer · 2017-10-17 05:47:31Z

0

Its better to execute these CSS changes after the document has completed loading.

$(document).ready(function(){
  $(document).find('#nav-icon span').css({
   'background-color': '#333'
  });
});

You can also reduce the code above to simply query the objects from the class. Since your parent object is the document, you can directly use JQuery selectors on the CSS classes

 $(document).ready(function(){
  $('#nav-icon span').css({
   'background-color': '#333'
  });
});

answered Oct 17, 2017 at 5:47

Rick Sanchez

264 bronze badges

1 Comment

user3550879 Over a year ago

I have to put it on the index page directly and was told the 'find' method works best

Collectives™ on Stack Overflow

Changing css on elements within specific pages

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related