CODEWITHSUNDEEP
htmlcssselector
Flora
Flora

Reputation: 25

Why doesn't my css id selector work?

<!DOCTYPE html>
<html>

<head>
    <title>ARACHNID-HUB</title>
    <meta name="description" content="A place to log the growth and activity of my dear darlings.">
    <link type = "text/css" rel="stylesheet" href="my.css">
    <link rel="stylesheet" type="text/css"
      href="https://fonts.googleapis.com/css?family=Pacifico">
    <link rel="stylesheet" type="text/css"
      href="https://fonts.googleapis.com/css?family=Dancing+Script">
</head>

<body>
    <div class= 'header'>
        <b>ArachHub</b>
    </div>
    <div class = 'lefty'>
        <nav>
             <ul>
            <li><a href="ArachHub.html">Home</a></li>
            <ul id='submenu'>
                <li ><a href='ArachHub.html#Welcome' id='submenu'>Home</a></li>
                <li ><a href='ArachHub.html#AboutMe' id='submenu'>About me</a></li>
            </ul>
            <li><a href="ArachLiving.html">Living thingys</a></li>
            <ul id='submenu'>
                <li ><a href='ArachLiving.html#AllThingsL' id='submenu'>All Things living</a></li>
                <li ><a href='ArachLiving.html#AnotherH' id='submenu'>Paragraph 2</a></li>
            </ul>
            <li><a href="ArachDead.html">Dead thingys</a></li>
            <ul>
                <li ><a href='ArachDead.html#AllThingsD' id='submenu'>All Things Dead</a></li>
                <li ><a href='ArachDead.html#AnotherH2' id='submenu'>Another Par 2</a></li>
            </ul>
             </ul>
        </nav>
    <p id=inbetween>Arachnid pets</p>
        <img id = Glamour src="http://arachnoboards.com/gallery/0-1-brachypelma-albopilosum.7342/full">
        <img id = Glamour src="http://www.mikebasictarantula.com/Pamphobeteus_sp._platyomma__3_.JPG">
        <img id = Glamour src="http://i.dailymail.co.uk/i/pix/2016/04/15/12/3334938200000578-3541749-image-a-24_1460721359328.jpg">
        <p id=inbetween>Non-Arachnid pets</p>
        <img id = Glamour src="http://www.mosta2bal.com/vb/lyncache/3/30922wall.jpg">
        <img id = Glamour src="http://www.queenies.nl/images/photos/IMG_5806.jpg">
        <img id = Glamour src="https://upload.wikimedia.org/wikipedia/commons/b/b7/George,_a_perfect_example_of_a_tuxedo_cat.jpg">
    </div>
    <div class="main">
    <a class="anchor" id="Welcome"></a>
        <h1>Welcome to ArachHub!</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultrices imperdiet purus, non rhoncus nulla posuere eget.</p>
    <a class="anchor" id="AboutMe"></a>
   <h2>About me</h2>
<p>Fusce sed ante pellentesque, ullamcorper mauris congue, dapibus ligula. Sed id porta ipsum. Proin ac quam interdum, mollis nibh id, fermentum sapien. </p>
    </div>
</body>
</html>

I used this code to try an build a basic site where my brother can put some stuff, but I'm having trouble with the side menu. The sub-items (with the ID of submenu), should be smaller in font-size than the larger items (without ID).

I tried to make this so by adding the following to my stylesheet:

#submenu {
font-size: 18px;
}

which should make the submenu items smaller than the others, which are set to:

a {
text-align: left;
font-family: Pacifico;
padding-top: 0px;
font-size: 26px;
margin-top: 0px;
color: #000000

Is there any thinkable reason this doesn't work? I'm using chrome to test it, and everything else seems to work fine.

Upvotes: 1

Views: 2705

Answers (2)

Amir Hoseinian
Amir Hoseinian

Reputation: 2352

Here is a working example for you using classes over id

.submenu{
  font-size: 8px
}
a{
  font-size: 20px
}
 <nav>
   <ul>
     <li><a href="#">Home</a></li>
     <ul class='submenu'>
       <li ><a href='#' class='submenu'>Home</a></li>
       <li ><a href='#' class='submenu'>About me</a></li>
     </ul>
     <li><a href="#">Living thingys</a></li>
     <ul class='submenu'>
       <li ><a href='#' class='submenu'>All Things living</a></li>
       <li ><a href='#' class='submenu'>Paragraph 2</a></li>
     </ul>
     <li><a href="#">Dead thingys</a></li>
     <ul>
       <li ><a href='#' class='submenu'>All Things Dead</a></li>
       <li ><a href='#' class='submenu'>Another Par 2</a></li>
     </ul>
   </ul>
</nav>

Upvotes: 0

MSH
MSH

Reputation: 1287

ids are unique

Each element can have only one id. Each page can have only one element with that id

classes are NOT unique

You can use the same class on multiple elements. You can use multiple classes on the same element.

Use class="submenu"instead ofid="submenu"

Upvotes: 2

Related Questions