CSS Selector Quiz

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

#world{ ... }

World{ ... }

.world{ ... }

@world{ ... }

None of the above

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

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

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

Li a{ ... }

Li.a{ ... }

Li, a{ ... }

Li-a{ ... }

None of the above

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.

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.

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

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.

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.

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

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.

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.

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

P.a{ ... }

A{ ... }

A, ul{ ... }

#a{ ... }

None of the above

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.

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.

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

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.

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.

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

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.

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.

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

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.

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.

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

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.

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.

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

not-available-via-ai

Explanation

not-available-via-ai