Skip to content

C020 CSS Selector

This is a simple task in using various CSS selectors.

Start by creating an HTML page with the following content:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My App</title>
  </head>
  <body>
    <h1>CSS Selector</h1>

    <p>p-tag #1</p>
    <p>p-tag #2</p>
    <p>p-tag #3</p>
    <p id="myP1">p-tag #4 with id "myP1"</p>
    <p id="myP2">p-tag #5 with id "myP2"</p>
    <p class="myClass1">p-tag #6 with class "myClass1"</p>
    <p class="myClass2">p-tag #7 with class "myClass2"</p>
    <p class="myClass1 myClass2">p-tag #8 with class "myClass1 myClass2"</p>
    <div>
      <p>p-tag #9 inside a div</p>
    </div>
    <div id="div1">
      <p>p-tag #10 inside a div with id "div1"</p>
    </div>
    <div id="div2" class="myClass3">
      <p>p-tag #11 inside a div with class "myClass3"</p>
    </div>
    <p>Here comes a ul</p>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>

    <div>
      <p>Here is a ul inside a div</p>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
      </ul>
    </div>
    <p>Image with a title attribute</p>
    <img title="my title" src="https://www.w3.org/2015/10/W3C-Developers_Assets/W3C-Developers-Dark.png" alt="image" width="100" />
    <p>Image without a title attribute</p>
    <img src="https://www.w3.org/2015/10/W3C-Developers_Assets/W3C-Developers-Dark.png" alt="image" width="100" />
    <p>Image with an alt value "W3C image"</p>
    <img src="https://www.w3.org/2015/10/W3C-Developers_Assets/W3C-Developers-Dark.png" alt="W3C image" width="100" />

    <p>Textbox</p>
    <input type="text" />

    <p>Checkbox</p>
    <input type="checkbox" />
  </body>
</html>

Now, open the F12 tool, open the console, and find elements using $$ (to find multiple elements). For example:

$$("p")

This should find and display all p elements.

Try to find the following:

  • All p elements.
  • All img elements.
  • All p and img elements.
  • p element with id = myP1.
  • p elements with id = myP1 or id = myP2.
  • p element with class = myClass1.
  • p elements with class = myClass1 or myClass2.
  • All p elements inside div elements.
  • All p elements inside a div with id = div1.
  • All p elements inside a div with class = myClass3.
  • All ul elements.
  • All li elements inside ul.
  • All img elements with a title attribute.
  • All img elements where the alt attribute contains “W3C.”
  • All textboxes.
  • All checkboxes.
  • The first li in each ul.
Solution
  • $$(“p”)
  • $$(“img”)
  • $$(“p, img”)
  • $$(“#myP1”) — or $$(“p#myP1”)
  • $$(“#myP1, #myP2”)
  • $$(“.myClass1”) — or $$(“p.myClass1”)
  • $$(“.myClass1,.myClass2”)
  • $$(“div p”)
  • $$(“div#div1 p”)
  • $$(“div.myClass3 p”)
  • $$(“ul”)
  • $$(“ul li”)
  • $$(“img[title]”)
  • $$(“img[alt*=’W3C’]”)
  • $$(“input[type=’text’]”)
  • $$(“input[type=’checkbox’]”)
  • $$(“ul li:first-child”)