Styling with CSS ID selector not working

Question

This is probably some kind of simple oversight on my part, but I have some html that's dynamically generated by a php function that assigns the div an ID. I'm trying to style some elements specifically for this output ID, so it won't affect the other elements that may use the same classes on the page.

Here's my html:

<div id="myProgress" class="step-progressbar-container step-progressbar-rounded">
<div class="step-progressbar-toplabels">
    <span class="step-progressbar-labels-wrapper">
        <span class="step-progressbar-steplabel step-progressbar-firststep" style="left: 0%;">0</span>
            <span class="step-progressbar-steplabel" style="left: 16.6667%;">25</span>
            <span class="step-progressbar-steplabel" style="left: 18%;">
            <i class="icon-top material-icons">directions_walk</i></span>
        <span class="step-progressbar-steplabel step-progressbar-nextstep" style="left: 33.3333%;">50</span>
            <span class="step-progressbar-steplabel" style="left: 50%;">75</span>
            <span class="step-progressbar-steplabel" style="left: 66.6667%;">100</span>
        <span class="step-progressbar-steplabel step-progressbar-laststep" style="left: 100%;">150</span></span>
</div>
<div class="step-progressbar-bar-wrapper">
    <span class="step-progressbar-bar">
        <span class="step-progressbar-progress" style="width: 18%;"></span>
            <span class="step-progressbar-steps-wrapper">
                <span class="step-progressbar-steps">
                    <span class="step-progressbar-step step-progressbar-firststep" style="left: 0%;"></span>
                        <span class="step-progressbar-step" style="left: 16.6667%;"></span>
                        <span class="step-progressbar-step" style="left: 18%;"></span>
                    <span class="step-progressbar-step step-progressbar-nextstep" style="left: 33.3333%;"></span>
                        <span class="step-progressbar-step" style="left: 50%;"></span>
                        <span class="step-progressbar-step" style="left: 66.6667%;"></span>
                    <span class="step-progressbar-step step-progressbar-laststep" style="left: 100%;"></span></span>
            </span>
        </span>
</div>
<div class="step-progressbar-bottomlabels">
    <span class="step-progressbar-labels-wrapper">
        <span class="step-progressbar-steplabel step-progressbar-firststep" style="left: 0%;"></span>
            <span class="step-progressbar-steplabel" style="left: 16.6667%;">1X</span>
            <span class="step-progressbar-steplabel" style="left: 18%;"></span>
        <span class="step-progressbar-steplabel step-progressbar-nextstep" style="left: 33.3333%;">2X</span>
            <span class="step-progressbar-steplabel" style="left: 50%;">3x</span>
            <span class="step-progressbar-steplabel" style="left: 66.6667%;">4X</span>
        <span class="step-progressbar-steplabel step-progressbar-laststep" style="left: 100%;">
            <i class="icon-btm material-icons">star</i></span></span>
</div>

and the css I'm trying to use with the div id selector. I've tried tried a few different iterations thinking it was a syntax error or something, but can't get it to target any of the classes with the ID prepended to them. (the styles do work without the parent div ID selector though).

#myprogress.step-progressbar-steplabel {
display: inline-block;
position: absolute;
z-index: 10000;
}
#myprogress.step-progressbar-firststep {
display: none !important;
}
#myprogress.step-progressbar-toplabels .step-progressbar-steplabel {
font-size: 16px;
color: #BBBBBB;
padding-top: 45px;
}
#myprogress.icon-top.material-icons{
font-weight: normal;
font-style: normal;
font-size: 58px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
padding-top: 0px !important;
}

score 3 · Accepted Answer · edited May 23 '17 at 10:27

You are using the selector incorrectly

You don't have element with the ID myprogress and the class step-progressbar-steplabel in the same element.

It looks like you are missing a space, it should be like this #myprogress .step-progressbar-steplabel not like this: #myprogress.step-progressbar-steplabel

https://css-tricks.com/child-and-sibling-selectors/

Also please use the correct case to avoid mismatch:

Are class names in CSS selectors case sensitive?

Styling with CSS ID selector not working

1 Answers1