CODEWITHSUNDEEP
htmlcss
user3343366
user3343366

Reputation: 373

Multiple ID selectors aren't working

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?

Upvotes: 1

Views: 137

Answers (4)

user10630512
user10630512

Reputation:

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!

Upvotes: 1

Jase Pellerin
Jase Pellerin

Reputation: 397

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><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Fruit</a></li>
</ul>
</div>

These should produce the desired effect. Source: http://css.maxdesign.com.au/listutorial/horizontal_master.htm

Upvotes: 1

Marc B
Marc B

Reputation: 360562

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.

Upvotes: 3

lee_gladding
lee_gladding

Reputation: 1100

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.

Upvotes: 7

Related Questions