CSS Selector Quiz

Reviewed by Editorial Team
The ProProfs editorial team is comprised of experienced subject matter experts. They've collectively created over 10,000 quizzes and lessons, serving over 100 million users. Our team includes in-house content moderators and subject matter experts, as well as a global network of rigorously trained contributors. All adhere to our comprehensive editorial guidelines, ensuring the delivery of high-quality content.
Learn about Our Editorial Process
| By Manokovacs
M
Manokovacs
Community Contributor
Quizzes Created: 1 | Total Attempts: 3,771
| Attempts: 3,771
SettingsSettings
Please wait...
  • 1/10 Questions

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

    • #world{ ... }
    • World{ ... }
    • .world{ ... }
    • @world{ ... }
    • None of the above
Please wait...
About This Quiz

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

CSS Selector Quiz - Quiz

Quiz Preview

  • 2. 

    <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>

    • Li a{ ... }

    • Li.a{ ... }

    • Li, a{ ... }

    • Li-a{ ... }

    • 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:

  • 3. 

    <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>

    • @all{ ... }

    • *{ ... }

    • HTML{ ... }

    • #{ ... }

    • None of the above

    Correct Answer
    A. *{ ... }
    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:

  • 4. 

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

    • Input@submit{ ... }

    • Input.submit{ ... }

    • Input.type=submit{ ... }

    • Input[type=submit]{ ... }

    • None of the above

    Correct Answer
    A. 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:

  • 5. 

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

    • P.a{ ... }

    • A{ ... }

    • A, ul{ ... }

    • #a{ ... }

    • None of the above

    Correct Answer
    A. 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:

  • 6. 

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

    • Div h1 + p { ... }

    • Div > h1 + p { ... }

    • H1 ~ p { ... }

    • Div h1 p { ... }

    Correct Answer
    A. 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:

  • 7. 

    <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>

    • .menu#ul a{ ... }

    • Ul.menu li a{ ... }

    • #header .a{ ... }

    • Div a{ ... }

    • None of the above

    Correct Answer
    A. 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:

  • 8. 

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

    • Div a{ ... }

    • Div + a{ ... }

    • Div a p{ ... }

    • Div > a{ ... }

    • None of the above

    Correct Answer
    A. 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:

  • 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>

    • .content h1, a{ ... }

    • #content h1+a{ ... }

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

    • #content h1 a { ... }

    • None of the above

    Correct Answer
    A. #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:

  • 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.active{ ... }

    • #content .a{ ... }

    • P a#active{ ... }

    • Div p a{ ... }

    • None of the above

    Correct Answer
    A. None of the above

Quiz Review Timeline (Updated): Apr 17, 2024 +

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.