BUGCATHER'S GUIDE TO NEARLY PERFECT CODE

Exercise 1: The Frustrating Font-Sizing Fiasco

Write a CSS rule that changes the font-size of all <h1> elements to 12pt, but only for elements that are direct children of <div> elements with a class of "special-div" and have an attribute "data-priority" of "high".

Hint: You'll need to use the ::selection pseudo-element and some clever CSS selectors.

View Solution

Exercise 2: The Elusive Element-Selector Escapade

Write a CSS rule that targets all <div> elements that are not descendants of <section> elements, but are descendants of <section> elements that are not descendants of <div> elements.

Hint: You'll need to use the :not() pseudo-class and some clever CSS selectors.

View Solution

Exercise 3: The Pixel Perfect Padding Puzzle

Write a CSS rule that adds 5px of padding to all <img> elements that are direct children of <figure> elements, but only if the <figure> element has a class of "special-figure" and an attribute "data-type" of "illustration".

Hint: You'll need to use the ::after pseudo-element and some clever CSS selectors.

View Solution