033.2 CSS Selectors and Style Application (weight: 3) WEB-DEVELOPMENT-ESSENTIALS Practice Questions (Page 6)

Questions 26–30

1. 26application · easy

   A developer wants to add a quotation mark before and after every <blockquote> element using CSS. They want to use pseudo-elements. Which CSS rule correctly adds the quotation marks?

   • Ablockquote::before { content: '“'; } blockquote::after { content: '”'; }
   • Bblockquote { content: '“'; }
   • Cblockquote::before { content: '“'; }
   • Dblockquote::after { content: '”'; }
   Reveal Solution Discussion Select an answer first
2. 27expert · medium

   A developer is troubleshooting a CSS issue where a paragraph inside a <div> is not inheriting the color set on the <div>. The <div> has color: blue;. The paragraph has a class 'special' with the rule .special { color: unset; }. What color will the paragraph text be?

   • Atransparent
   • Bblack (browser default)
   • Cblue
   • DThe color from the user agent stylesheet
   Reveal Solution Discussion Select an answer first
4. 28expert · medium

   A developer has the following CSS rules for a link: a { color: red; } .nav a { color: blue; } a.nav-link { color: green; } #main a { color: purple; }. The link has class 'nav-link' and is inside a <nav> element with id='main'. What color will the link be?

   • Apurple
   • Bgreen
   • Cblue
   • Dred
   Reveal Solution Discussion Select an answer first
5. 29expert · medium

   A developer wants to style all <span> elements that are inside a <div> but not directly inside the <div> (i.e., they may be nested deeper). They also want to exclude spans that have a class 'no-style'. Which selector should they use?

   • Adiv span.no-style
   • Bdiv span:not(.no-style)
   • Cdiv ~ span:not(.no-style)
   • Ddiv > span:not(.no-style)
   Reveal Solution Discussion Select an answer first
6. 30expert · hard

   A developer has a list of items where the first item is a header (with class 'header') and the rest are regular items. They want to style every third regular item (i.e., items 4, 7, 10, ... in the list). The HTML is: <ul><li class='header'>Header</li><li>Item1</li><li>Item2</li><li>Item3</li>...</ul>. Which selector should they use?

   • Ali:not(.header):nth-child(3n+4)
   • Bli:nth-child(3n+4)
   • Cli:nth-child(3n+1)
   • Dli:not(.header):nth-child(3n+1)
   Reveal Solution Discussion Select an answer first