Hide specific elements in bootstrap sidebar

Question

I have the following code

    <div class="wrapper">
        <nav id="sidebar">
            <ul class="list-unstyled components">
                <li class="navhead">My Title</li>
                <li> <a href="#intro" class="sidebar">Introduction</a></li>
            <li>
                <a href="#firstCategory" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle sidebar">First Category</a>
                <ul class="collapse list-unstyled" id="firstCategory">
                    <li><a href="#firstCategory2" class="sidebar">Intro</a></li>
                    <li><a href="#firstItem" class="sidebar internal">First Item</a></li>
...
            <a id="firstItem"></a>
            <div id="firstItemDiv" class="internal">
...

I used to hide the internal class in my $(document).ready(function () with $('.internal').hide(); if a URL parameter was specified. However, this caused DOM/Page flicker, so I added .internal {display: none} to my .css file and now call $('.internal').show(); in my ready when the parameter is specified.

In other words, Intro always shows, but First Item should only show when the URL parameter is specified.

This works great for my firstItemDiv, but my sidebar internal li element (First Item) still shows. How can I get it not to show by default?

Answer 1

(true confessions: I was able to peek at the actual page with the issue)

The issue here was that there was a more "specific" rule that was overriding the "internal" class rule. There was a rule with "id" specificity:

#sidebar ul li a {
    display: block;
}

and another with class specificity:

.internal {
    display: none;
}

changing the second one to:

#sidebar .internal, .internal {
    display: none;
}

should fix it.