CSS id's not working

Question

I am trying to style two Bootstrap panels slightly differently. I decided to do this by naming them with different id's and then styling them via CSS. For some reason the CSS id selector is not working for me.

Here is the HTML:

           <div class="col-md-3">
                <div id="price" class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Price</h3>
                    </div>
                    <div class="panel-body">{{ item[0][3] }}</div>
                </div>
            </div>
            <div class="col-md-3">
                <div id="size" class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Size</h3>
                    </div>
                    <div class="panel-body">{{ item[0][2] }}</div>
                </div>
            </div>

And the CSS:

#price .panel-default {

    width: 150px;
    font-size: 18px;
}

#size .panel-default {

    width: 100px;
    font-size: 188px;
}

All the CSS / HTML I know is self taught so I may be missing something fundamental here. Any help is appreciated, thanks.

try #price.panel-default instead. (without the space) – Grainier Jul 13 '16 at 03:07 — Grainier, Jul 13 '16 at 03:07

score 3 · Accepted Answer · edited Jul 17 '16 at 21:26

3

Your CSS selector has an extra space between price and panel-default so it's basically looking for a child with class="panel-default" inside a div with id="price". To get the selector to look for a div with id="price" and class="panel-default" remove the space between #price and .panel-default. Try:

#price.panel-default {

    width: 150px;
    font-size: 18px;
}

#size.panel-default {

    width: 100px;
    font-size: 188px;
}

edited Jul 17 '16 at 21:26

Nisse Engström

4,738
23
27
42

answered Jul 13 '16 at 03:07

StaticBeagle

5,070
2
23
34

Wow, I could have sworn I already tried that. Thanks! – Michael Bremerkamp Jul 13 '16 at 03:09
@MichaelBremerkamp I know the feeling. Glad I could help. – StaticBeagle Jul 13 '16 at 03:10

score 2 · Answer 2 · edited Jul 17 '16 at 21:31

2

When you put a space between #price and .panel-default you're telling the CSS to look for a child object of id="price" with class="panel-default".

What you want is this:

#price.panel-default{
   ...
}

Without the space it's looking for one object with both the class and id

edited Jul 17 '16 at 21:31

Nisse Engström

4,738
23
27
42

answered Jul 13 '16 at 03:07

Okomikeruko

1,123
10
22

score 0 · Answer 3 · edited Jul 17 '16 at 21:40

0

Remove spaces:

#price.panel-default
#size.panel-default

#price .panel-default means some block with class panel-default that is in another block with id price.

edited Jul 17 '16 at 21:40

Nisse Engström

4,738
23
27
42

answered Jul 13 '16 at 03:09

Leonid Zakharov

940
1
6
11

score 0 · Answer 4 · edited Jul 17 '16 at 21:37

When selecting a CSS, #size.panel-default is different from #size .panel-default.

#size.panel-default could select an element that contains both id size and class panel-default:

<div id="size" class="panel-default"> <-- This is selected -->
</div>

while #size .panel-default select an element that has class panel-default and has a parent element with id size:

<div id="size">
  <div class="panel-default"> <-- This is selected -->
  </div>
</div>

Therefore the correct CSS for your case would be:

#price.panel-default {
  width: 150px;
  font-size: 18px;
}
#size.panel-default {
  width: 100px;
  font-size: 188px;
}

CSS id's not working

4 Answers4