Multiple ID selectors aren't working - html

Question

So i have two Divs like this:
<div id="first_content">
<ul>
<li>This</li>
<li>text</li>
<li>should</li>
<li>be</li>
<li>displayed</li>
<li>in</li>
<li>one</li>
<li>line</li>
</ul>
</div>
<div id="second_content">
<ul>
<li>This</li>
<li>text</li>
<li>should</li>
<li>be</li>
<li>displayed</li>
<li>in</li>
<li>one</li>
<li>line</li>
</ul>
</div>
And CSS:
#first_content, #second_content ul {
list-style: none;
}
#first_content, #second_content ul li {
display: inline;
}
It doesn't work (at least on firefox 34). Style applies only to one ID.
When i remove one of these ID selectors, another one works fine.
I guess it should work? what's wrong?

Answer 1

try:
#first_content ul, #second_content ul {
list-style: none;
}
#first_content ul li, #second_content ul li {
display: inline;
}
if you are trying to select the ul's and li's of both containers you need to specify this with both selectors.

Answer 2

Basic CSS
.foo, .bar { ... }
are two separate selector chains. You have:
#first-content, #second_content ul
^--- applies to <div id="first-content">
^^^^^^^^^^--- applies to any <ul> inside <div id="second-content">
<div> tags do not have a list-style, so your first rule doesn't do anything for the first <div> set. For your other rule set, display-inline will apply to the parent div for first-content, and to the <li> tags in the second-content area.

Answer 3

Here is some css:
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}
#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}
And some HTML:
<div id="navcontainer">
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Cheese</li>
<li>Vegetables</li>
<li>Fruit</li>
</ul>
</div>
These should produce the desired effect. Source: http://css.maxdesign.com.au/listutorial/horizontal_master.htm

Answer 4

Multiple id concatenation has never worked in Firefox. For example, I am using 67.0 (64-bit) and the following CSS works as intended:
#noDisplay {
display: none;
}
#togForm {
display: none;
}
...but if I concatenate that, as shown below, it does not work (one id working, the other not working), and this has always been the case.
#noDisplay,#togForm {
display: none;
}
I know that sometimes the reason is because of conflicting entries, but display: none on its own? - Argue with that if you can!