PHP Change CSS Style

Question

I'm trying to hide a login button if the user is logged in. Due to the clients Wordpress setup, I'm not able to directly edit the button HTML.

Button HTML (unable to edit):

<li id="menu-item-153" class="menu-item menu-item-type-custom menu-item object-custom current-menu-item current_page_item menu-item-home menu-item-153">
  <a href="#">
     <span id="SignUp" class="et_pb_more_button et_pb_button">
       <p>SIGN UP</p>
     </span>
  </a>
</li>

My thoughts was to write a simple PHP if statement to change the CSS within the header.

<?php
    if ( is_user_logged_in() ) {
    ?>
    <style type="text/css">
        #menu-item-153 {
                display: none;
      }
  </style>
<?php } ?>

However, the PHP echo outputs on the page but it doesn't change the CSS.

On inspection, it looks like the following:

Any suggestions here? Thanks!

Edit:

Just tried using a jQuery way with no luck:

<script>
    $( 'menu-item-153' ).css('display', 'none');
</script>

Answer 1

It's a CSS specificity issue. You can use

#top-menu li#menu-item-153 {
  display: none;
}

or

#menu-item-153 {
  display: none!important;
}

Or if you want to do it with jQuery, you left off the # ID part of the selector

$('#menu-item-153').css('display', 'none');

Answer 2

Your PHP-part is functioning just as it should.

Your problem is that your "display:none;" is being overriden by another piece of styling:

#top-menu li {
display:inline-block;
}

Make YOUR CSS selector more specifik to override this: Use this:

#top-menu #menu-item-153 {
display:none;
}

Answer 3

You have a rule with specificity of 101 points.

#top-menu /* id selector = 100 specificity points */

li        /* element selector = 1 specificity point */

The above rule is overriding another rule with a specificity of 100:

#menu-item-153 /* 100 specificity points */

You could use !important to quash the first rule and get it over with.

However, often times it's good to reserve !important for when it's absolutely necessary .

In this case, you just need 2 points for the preferred rule to prevail. This should do it:

li#menu-item-153.menu-item /* class selector = 10 specificity points (111 total) */

or

#top-menu > #menu-item-153 /* 200 specificity points */

More info: http://cssspecificity.com/