CODEWITHSUNDEEP
htmlcss
Georgy Simelus
Georgy Simelus

Reputation: 19

how do I target the second span in a list?

I am trying align the food prices on top of each other for the menu section for food on page. I placed the price in a span within the li of food, it worked for first span but not the others.

I know about nth-child but its not working. Did just right it wrong ?

Here's the fiddle: https://jsfiddle.net/Gsimelus92/z8dna4c2/3/

.apett-left ul li:nth-child(1) {
          margin-bottom:5px;
          font-size: 19px;
          font-weight: bold;
         }

     .apett-left span:nth-child(1){
          color: #AA8A45;
          margin-left:130px;
         }

     .apett-left ul li:nth-child(2) {
          margin-bottom:5px;
          font-size: 14px;
          font-weight: normal;
          border-bottom-style: dotted;
          border-color: white;
          padding-bottom: 5px;
          margin-bottom: 15px;
         }

     .apett-left span:nth-child(2){
          color: #AA8A45;
          margin-left:130px;
            }


         /********************foodder and price 2 ******/


     .apett-left ul li:nth-child(3) {
          margin-bottom:5px;
          font-size: 19px;
          font-weight: bold;
         }

     .apett-left ul li:nth-child(4) {
          margin-bottom:5px;
          font-size: 14px;
          font-weight: normal;
          border-bottom-style: dotted;
          border-color: white;
          padding-bottom: 5px;
          margin-bottom: 15px;
        }

     .apett-left span:nth-child(2){
          color: #AA8A45;
          margin-left:200px;    
         }
   <section class="pat-a">
      <div class="apett-pic">
        <img src="bbq-nachos.jpg"width="800" height="500">
      </div>
      <div class="apett-food">
          <div class="apett-left">
             <ul>
               <li>Mozzarella Sticks <span>$7.00</span></li>
               <li>Add pulled pork /homemade chilli / bbq beans <span>$1.50</span></li>
                      
               <li>Boneless Wing <span>$0.00</span></li>
               <li>Plain / spicy / sticky bbq <span>$0.00</span></li>

               <li>biscuits & bbq beans</li>
               <li>each bicuite</li>
             </ul>                        
          </div>
      </div>
</section>

Upvotes: 0

Views: 118

Answers (1)

Henfs
Henfs

Reputation: 5411

You are trying to select the second child span, but there is no second child, only first. Both span are the first child of their li elements. Instead of selecting the first and second span, try to select the first and second li, and then span inside, like this:

.apett-left ul li:nth-child(1) span {
    /* code */
 }
.apett-left ul li:nth-child(2) span {
    /* code */
 }

Upvotes: 2

Related Questions