• Portfolio
  • Services
  • A...">
    Geek asks and answers

    Ul # menu vs #menu?

    HTML :

    <ul id="menu">
    <li><a href="" class="active">Portfolio</a></li>
    <li><a href="">Services</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Testimonials</a></li>
    <li><a href="">Request a Quote</a></li>
</ul>

    CSS :

    ul#menu li {
    display:inline;
    margin-left:12px;
}

    Is there a difference between using " ul#menu li" and just " #menu li"? I used both versions and they seem to do the exact same thing. Is there a reason most textbooks use the ul before the identifier?

    +3
    source share
    5 answers

    There is one obvious difference and another subtle difference.

    The obvious difference is that it is #menuintended for all elements with an identifier #menu, while it ul#menufocuses only on elements ul. If you specify only ID elements #menu ul, selectors will always have the same result.

    - . , . , :

    #menu li {color: blue;}
ul#menu li {color: red;}

    , , . , , ul#menu li , #menu li. , . , , - ; .

    , ul#menu, . ( , , !) , -.

    +12

    .

    ul#menu li , li id #menu type ul.

    • , UL > #MENU > LI

    #menu li li id #menu.

    • , #MENU > LI

    . #menu li , , , , . , #menu li.

    +3

    . ul#menu , , , <ul>, . , <ul> <div>, , ( css). , - #menu, , , ul#menu. : battle-of-the-selectors-specificity.

    +2

    , , .

    , <div id="menu"></div> <ul id="menu"></ul> , CSS ? , , ul#menu #menu. , CSS id="menu" ul id="menu"? .

    0

    , @jacktheripper, :

    , ul#menu li , , CSS . , #menu, UL - , #menu.

    This makes a big difference when using long selector chains: #mainmenu ul.menu li.current ul li.current(instead of maybe #mainmenu .current .current).

    0
    source

    More articles:


    All Articles