History

Christina M 6cee3ab17a update foundations/05-decendent-combinator		2023-06-10 12:15:43 -05:00
..
solution	update foundations/05-decendent-combinator	2023-06-10 12:15:43 -05:00
README.md	Add new outcome screenshots	2021-10-06 15:55:58 -04:00
desired-outcome.png	update foundations/05-decendent-combinator	2023-06-10 12:15:43 -05:00
index.html	Add indent to the <body> and <head> tags within <html> for readability	2022-01-30 11:56:35 -06:00
style.css	Add solutions and templates	2021-08-29 19:22:54 -04:00

README.md

Descendant Combinator

Understanding how combinators work can become a lot easier when you start playing around with them and see what exactly is affected by them versus what isn't.

The goal of this exercise is to apply styles to elements that are descendants of another element, while leaving elements that aren't descendants of that element unstyled.

You can use either type or class selectors for this exercise; use whichever you may feel you want to practice with more. The HTML file is set up (so no need to edit anything in it) such that any combination of selectors will work, so if you're feeling adventurous you can even try combining a type and class selector for the descendant combinator.

The properties you need to add are:

Only the p elements that are descendants of the div element should have a yellow background, red text, a font size of 20px, and center aligned.

Desired Outcome

Self Check

Do the elements that contain the text "This should be styled" have the correct styles applied?
Do the elements that contain the text "This should be unstyled" have no styles applied?