CSS Selector Quiz

Approved & Edited by ProProfs Editorial Team
The editorial team at ProProfs Quizzes consists of a select group of subject experts, trivia writers, and quiz masters who have authored over 10,000 quizzes taken by more than 100 million users. This team includes our in-house seasoned quiz moderators and subject matter experts. Our editorial experts, spread across the world, are rigorously trained using our comprehensive guidelines to ensure that you receive the highest quality quizzes.
Learn about Our Editorial Process
| By Manokovacs
M
Manokovacs
Community Contributor
Quizzes Created: 1 | Total Attempts: 3,299
Questions: 10 | Attempts: 3,299

SettingsSettingsSettings
CSS Selector Quiz - Quiz

Which CSS selector applies to the bolded element(s) only?


Questions and Answers
  • 1. 

    <div>     Hello <span class="world">world</span> </div>

    • A.

      #world{ ... }

    • B.

      World{ ... }

    • C.

      .world{ ... }

    • D.

      @world{ ... }

    • E.

      None of the above

    Correct Answer
    C. .world{ ... }
    Explanation
    The correct answer is .world{ ... }. In the given code, the class "world" is applied to a span element. To select and style this element, the CSS selector should start with a dot (.) followed by the class name "world". Therefore, the correct CSS selector to style the "world" class is ".world".

    Rate this question:

  • 2. 

    <p>      <ul>         <li>             <a href="http://example.com">I am special!</a>         </li>     </ul>     <a href="http://example.com">Me too.</a> </p>

    • A.

      P.a{ ... }

    • B.

      A{ ... }

    • C.

      A, ul{ ... }

    • D.

      #a{ ... }

    • E.

      None of the above

    Correct Answer
    B. A{ ... }
    Explanation
    The correct answer is "a{ ... }". This is because the CSS selector "a" selects all anchor elements on the page, and the curly braces indicate that there are CSS rules to be applied to those elements. The other options are not correct because they either select different elements or have incorrect syntax.

    Rate this question:

  • 3. 

    <p>      <ul>         <li>             <a href="http://example.com">I am special!</a></strong>         </li>     </ul>     <a href="http://example.com">I am not.</a> </p>

    • A.

      Li a{ ... }

    • B.

      Li.a{ ... }

    • C.

      Li, a{ ... }

    • D.

      Li-a{ ... }

    • E.

      None of the above

    Correct Answer
    A. Li a{ ... }
    Explanation
    The correct answer is "li a{ ... }". This is the correct CSS selector to target the anchor tag within the list item. The selector "li a{ ... }" will apply the CSS rules specified within the curly braces to the anchor tag within the list item.

    Rate this question:

  • 4. 

    What is the correct CSS selector to style only the paragraph that directly follows an h1 tag within the same div?

    • A.

      Div h1 + p { ... }

    • B.

      Div > h1 + p { ... }

    • C.

      H1 ~ p { ... }

    • D.

      Div h1 p { ... }

    Correct Answer
    B. Div > h1 + p { ... }
    Explanation
    Option B, div > h1 + p { ... }, is the correct CSS selector to specifically style a paragraph (p) that directly follows an h1 element within the same div, ensuring the paragraph is the immediate sibling of the h1.

    Rate this question:

  • 5. 

    <div id="header">     <h1>Website.com</h1>     <ul class="menu">          <li><a href="#">About us</a></li>          <li><a href="#">About you</a></li>          <li><a href="#">About</a></li>     </ul> </div> <div id="content">     <h1>Hello!</h1>     <p>bla <a href="#">bla</a></p> </div>

    • A.

      .menu#ul a{ ... }

    • B.

      Ul.menu li a{ ... }

    • C.

      #header .a{ ... }

    • D.

      Div a{ ... }

    • E.

      None of the above

    Correct Answer
    B. Ul.menu li a{ ... }
    Explanation
    The correct answer is ul.menu li a{ ... }. This is the correct CSS selector to target the anchor tags (a) within the list items (li) of the unordered list (ul) with the class "menu". The selector starts with the ul element with the class "menu", then selects the li elements within it, and finally selects the anchor tags within the li elements. This selector will apply the specified CSS rules to those anchor tags.

    Rate this question:

  • 6. 

    <div id="header">     <h1>Website.com</h1>     <ul class="menu">          <li><a href="#">About us</a></li>          <li><a href="#">About you</a></li>          <li><a href="#">About</a></li>     </ul> </div> <div id="content">     <h1>Hello!</h1>     <p>bla <a href="#">bla</a></p> </div>

    • A.

      @all{ ... }

    • B.

      *{ ... }

    • C.

      HTML{ ... }

    • D.

      #{ ... }

    • E.

      None of the above

    Correct Answer
    B. *{ ... }
    Explanation
    The correct answer is *{ ... }. This is a CSS selector that targets all elements on the page and applies the specified styles to them. In this case, it is likely that the styles within the curly braces are being applied to all elements in the HTML document.

    Rate this question:

  • 7. 

    <div id="content">     <a href="#">Home</a>     <h1>Hello!</h1>     <p>bla <a href="#">bla</a></p> </div>

    • A.

      Div a{ ... }

    • B.

      Div + a{ ... }

    • C.

      Div a p{ ... }

    • D.

      Div > a{ ... }

    • E.

      None of the above

    Correct Answer
    D. Div > a{ ... }
    Explanation
    The correct answer is "div > a{ ... }". This is because the selector "div > a" targets the anchor element that is a direct child of the div element. The ">" symbol represents the direct child selector in CSS, so the style rules within the curly braces will be applied only to the anchor element that is a direct child of the div element.

    Rate this question:

  • 8. 

    <input type="button" value="Button" /> <input type="submit" value="Submit button" /> <input type="checkbox" value="value" /> <input type="text" value="Bal bla" />

    • A.

      Input@submit{ ... }

    • B.

      Input.submit{ ... }

    • C.

      Input.type=submit{ ... }

    • D.

      Input[type=submit]{ ... }

    • E.

      None of the above

    Correct Answer
    D. Input[type=submit]{ ... }
    Explanation
    The correct answer is "input[type=submit]{ ... }". This is the correct CSS selector for targeting an input element with the type attribute set to "submit". The CSS selector syntax uses the element name followed by square brackets containing the attribute name and value. In this case, "input[type=submit]" selects all input elements with the type attribute set to "submit" and applies the CSS rules specified inside the curly braces.

    Rate this question:

  • 9. 

    <div id="header">     <h1>Website.com</h1>     <ul class="menu">          <li><a href="#">About us</a></li>          <li class="active"><a href="#">About you</a></li>          <li><a href="#">About</a></li>     </ul> </div> <div id="content">     <h1>Hello!</h1>     <p>bla <a href="#">bla</a></p>     <p>Blah, bla bla <a class="active" href="#">bla</a>!</p> </div>

    • A.

      A.active{ ... }

    • B.

      #content .a{ ... }

    • C.

      P a#active{ ... }

    • D.

      Div p a{ ... }

    • E.

      None of the above

    Correct Answer
    E. None of the above
  • 10. 

    <div id="header">     <h1>Website.com</h1>     <ul class="menu">          <li><a href="#">About us</a></li>          <li class="active"><a href="#">About you</a></li>          <li><a href="#">About</a></li>     </ul> </div> <div id="content">     <h1>Hello!</h1>     <p>bla <a href="#">bla</a></p>     <p>Blah, bla bla <a class="active" href="#">bla</a>!</p> </div>

    • A.

      .content h1, a{ ... }

    • B.

      #content h1+a{ ... }

    • C.

      #conten h1, #content a{ ... }

    • D.

      #content h1 a { ... }

    • E.

      None of the above

    Correct Answer
    C. #conten h1, #content a{ ... }
    Explanation
    The correct answer is "#conten h1, #content a{ ... }". This answer is correct because it correctly selects the h1 element within the div with id "content" and the anchor element within the same div. The CSS selector "#conten h1" is a typo and should be corrected to "#content h1". The selector "#content h1+a" selects the adjacent sibling of the h1 element within the div with id "content", but there is no adjacent sibling in the given HTML. The selector ".content h1, a" selects the h1 element within an element with class "content" and any anchor element, but there is no element with class "content" in the given HTML. The selector "#content h1 a" selects an anchor element within an h1 element within the div with id "content", but there is no anchor element within the h1 element in the given HTML.

    Rate this question:

Quiz Review Timeline +

Our quizzes are rigorously reviewed, monitored and continuously updated by our expert board to maintain accuracy, relevance, and timeliness.

  • Current Version
  • Apr 17, 2024
    Quiz Edited by
    ProProfs Editorial Team
  • Feb 19, 2012
    Quiz Created by
    Manokovacs
Back to Top Back to top
Advertisement
×

Wait!
Here's an interesting quiz for you.

We have other quizzes matching your interest.