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

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="https://example.com">Secure Link</a>

<a href="http://example.org">Non-secure 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="https://example.com">Link 1</a>

<a href="https://another.com">Link 2</a>

</nav>