CSS Combinators Coding Questions
1. Write the CSS code to change the text color to blue for all <p> elements inside a div with the class container.
<div class="container">
<p>This text should be blue.</p>
<p>This text should also be blue.</p>
</div>
2. Write CSS to apply a background-color of #f0f0f0 to all elements with the class highlight, but exclude the
element with the ID special.
<div class="highlight">This should have a gray background.</div>
<div id="special" class="highlight">This should not have a gray background.</div>
3. Write CSS to select all <input> elements of type text and apply a border of 2px solid red.
<input type="text" placeholder="Text input with red border">
<input type="submit" value="Submit">
4. Write CSS to select only the direct child <li> elements within a <ul> with the class menu and give them a
margin-left of 20px.
<ul class="menu">
<li>First item</li>
<li>Second item</li>
<ul>
<li>Sub-item (no margin)</li>
</ul>
</ul>
5. Write CSS to change the text color of a <p> element to green if it immediately follows an <h2> element.
<h2>Heading</h2>
<p>This paragraph should be green.</p>
<p>This paragraph should not be green.</p>
6. Write CSS to apply an italic font style to all <span> elements that are siblings of a <p> element within a
section with the class content.
<section class="content">
<p>Paragraph 1</p>
<span>This should be italic.</span>
<span>This should also be italic.</span>
</section>
7. Write CSS to change the background color of any button to yellow when hovered over.
<button>Hover over me</button>
<button>And me too</button>
8. Write CSS to select every third item in an unordered list and apply a background-color of lightgray.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3 (should be gray)</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6 (should be gray)</li>
</ul>
9. Write CSS using the ::before pseudo-element to insert the word "Note:" before every paragraph within a div
with the class note.
<div class="note">
<p>This is an important note.</p>
<p>Don't forget this!</p>
</div>
10. Write CSS to apply a font-weight of bold to all <h1>, <h2>, and <h3> elements.
<h1>Title 1</h1>
<h2>Subtitle 2</h2>
<h3>Subheading 3</h3>
Expert Level Coding Questions
11. Combine the child and adjacent sibling combinators to select all immediate li siblings of the first li child in a
list and apply a color of blue.
<ul>
<li>Item 1 (no color change)</li>
<li>Item 2 (should be blue)</li>
<li>Item 3 (should be blue)</li>
</ul>
12. Write CSS using the :not() pseudo-class to select all <input> elements inside a form that are not of type
submit and apply a background-color of #e0e0e0.
<form>
<input type="text" placeholder="Text input">
<input type="email" placeholder="Email input">
<input type="submit" value="Submit">
</form>
13. Write CSS to apply a border to the second p element of each type within any section.
<section>
<p>Paragraph 1</p>
<p>Paragraph 2 (should have a border)</p>
<p>Paragraph 3</p>
</section>
14. Write CSS using the ::after pseudo-element to add a closing quotation mark after every blockquote inside an
article with the class quote.
<article class="quote">
<blockquote>This is a quote</blockquote>
<blockquote>Another important quote</blockquote>
</article>
15. Write CSS to change the text color of the last child in a list to red and append a checkmark using the ::after
pseudo-element.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3 (should be red with a checkmark)</li>
</ul>
16. Write CSS using an attribute selector to select all anchor (<a>) elements with an href attribute starting with
https and ending with .com, then apply an underline text decoration.
<a href="[Link] Link</a>
<a href="[Link] Link</a>
17. Write CSS to apply a background-color of lightblue to all even rows of a table within a div that has both the
class data and an ID primary.
<div id="primary" class="data">
<table>
<tr><td>Row 1</td></tr>
<tr><td>Row 2 (should be lightblue)</td></tr>
<tr><td>Row 3</td></tr>
<tr><td>Row 4 (should be lightblue)</td></tr>
</table>
</div>
18. Write CSS to change the border of a div with class input-group to 2px solid green when any of its input
elements are focused.
<div class="input-group">
<input type="text" placeholder="Focus me">
<input type="email" placeholder="Or focus me">
</div>
19. Write CSS to select all paragraphs inside a section with class content that are the first child of their parent
and apply a font-size of 18px.
<section class="content">
<p>This is the first paragraph and should have a larger font size.</p>
<p>This is another paragraph.</p>
</section>
20. Write CSS to select all links inside a <nav> that have been visited and change their color to purple.
<nav>
<a href="[Link] 1</a>
<a href="[Link] 2</a>
</nav>
