Skip to content

Latest commit

 

History

History
60 lines (54 loc) · 1.16 KB

ex_20.md

File metadata and controls

60 lines (54 loc) · 1.16 KB
Raw

Exercise 20

  • Create the following folder/file structure:
/ex_20
  |-- index.html

index.html

  • Create a basic HTML document
  • Create a script tag on the document head element
  • Add the following html code
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Elements</title>
  <style>
    .red {
      color: red;
    }
    
    .green {
      color: green;
    }
    
    .orange {
      color: orange;
    }
  </style>
</head>
<body>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</body>
</html>
  • Select the ul element
  • Show the ul children elements as output
  • Select the 2nd child element, assign it to a variable and assign the green class to it
  • Select the 4th child element, assign it to a variable and assign the red class to it
  • Use the selected child elements to show the parent one as output
  • Using one of the child elements get a reference to the parent and add the orange class to it

Expected result:

  <ul class="orange">
    <li>Item 1</li>
    <li class="green">Item 2</li>
    <li>Item 3</li>
    <li class="red">Item 4</li>
    <li>Item 5</li>
  </ul>