Skip to main content Link Menu Expand (external link) Document Search Copy Copied

CSS Selectors

For this activity, we will create and style a list (or multiple lists) of items (<li>) of any kinds of contents. The list may be an unordered list (<ul>) or an ordered list (<ol>).

You are strongly encouraged to style the list as you wish; get creative and have fun! For example, choose a background color, change the font family / size / style / weight / color, adjust paddings, or try new properies and see how they look on your screen.

You may define and embed CSS rules in the document level or in the external level. You should avoid using in-line CSS.

We will continue to be discussing HTML and CSS as we progress in the course. For additional references, please refer to W3 Schools and Prof. Praphamontripong’s HTML Reference and CSS Reference.

  1. Create an HTML file
  2. Add a list of items (either an unordered list or an ordered list, you decide and be creative). You will decide on the items; they may be textual content, links, images, emoji, etc. For example:
     <ul>
       <li>item 1</li>
       <li>item 2</li>
       <li>item 3 &mdash; <a href="http://www.cs.virginia.edu/" target="_blank">link to CS department</a> </li>
       <li>item 4</li>  
       <li>item 5 &#128540;</li>
       <li>item 6</li>
       <li>item 7</li>      
       <li>item 8</li>
       <li>item 9</li>        
     </ul> 
    
  3. Open your HTML file in a web browser. Observe how the document is displayed.
  4. Define CSS rules to style the list items using element selectors (ul and li).
     ul { 
       font-family: Arial, Helvetica, sans-serif;
       margin: 10px;  
     }
     li {
       display: block;   
       padding: 4px 10px 4px 10px;  
     }  
    
  5. Open your HTML file in a web browser. Observe how the document is displayed.
  6. Define CSS rules to style the odd list items with :nth-child pseudo-class selector, and use the odd keyword.
     li:nth-child(odd) {
       background-color: deepskyblue;
       color: white;
       font-weight: bold; 
     }
    
  7. Open your HTML file in a web browser. Observe how the document is displayed.
  8. Let’s style the seleced item(s). Add a selected class to the 5th item with class="selected".
     <li class="selected">item 5 &#128540;</li>
    
  9. Define rules for the .selected class selector.
     li.selected {   
       background-color: orange;
     } 
    
  10. Open your HTML file in a web browser. Observe how the document is displayed. Question: notice that li.selected overrides the striped effect previously defined in li:nth-child(odd). Why?
  11. Style the odd list items after the selected item using the general sibling (i.e., all-next-siblings) combinator. For example,
    li.selected ~ li:nth-child(odd) {
      background-color: gray;
    }
    
  12. Open your HTML file in a web browser. Observe how the document is displayed.
  13. Try arranging li.selected before li:nth-child(odd) and observe how the list is displayed.
    li.selected {   
      background-color: orange;
    }
    li:nth-child(odd) {
      background-color: deepskyblue;
      color: white;
      font-weight: bold; 
    } 
    
  14. Open your HTML file in a web browser. Observe how the document is displayed. Do this screen and the screen from the previous step look the same? If they are different, why?