Skip to content

Latest commit

 

History

History
60 lines (54 loc) · 1.18 KB

ex_21.md

File metadata and controls

60 lines (54 loc) · 1.18 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 first list item element and add the orange class
  • Using the selected element select the following element using nextElementSibling and add the orange class
  • Keep doing this until there's no more siblings
  • At the end all elements must have the orange class
  • Once you acomplish this task:
  • Now we need to go back using previousElementSibling
  • Add red class to Item 3
  • Add green class to Item 1
  • Final result on the browser must be:
<li class="green">Item 1</li>
<li class="orange">Item 2</li>
<li class="red">Item 3</li>
<li class="orange">Item 4</li>
<li class="orange">Item 5</li>