CSS Html Question

I have the following code: <!doctype html> <style> h4 { color:powderblue; } .headline{ color:orange; } article{ color:purple; font-style: normal; } aside h4{ font-style: italic !important; color:yellow; } article h4{ font-style: normal; color:blue; } </style> <div> <h4>International News</h4> <article> <h4 class="headline">New Developments</h4> <aside> <h4>Impact on Markets</h4> </aside> </article> </div> </html> My question is: Why is the text, "Impact on Markets" in blue and not yellow?

html css

9th Jul 2018, 5:39 PM

Stefan du Toit

6 Answers

+ 3

"article h4" applies to all h4 elements. Change it to "article > h4" so it only applies to elements directly below

9th Jul 2018, 5:48 PM

Toni Isotalo

+ 2

Because "New Developments" is not inside "aside" element

9th Jul 2018, 5:49 PM

Toni Isotalo

Thanks for the answer, but if "article h4" overwrites "aside h4" because of the order in the css, then why is "New Developments" orange and not purple?

9th Jul 2018, 5:48 PM

Stefan du Toit

Yes, but it is inside "article" element, which should be purple and is described after ".headline" in the css

9th Jul 2018, 5:51 PM

Stefan du Toit

Question: Why is "New Developments" orange and not purple? <!doctype html> <style> .headline{ color:orange; } article{ color:purple; font-style: normal; } </style> <div> <article> <h4 class="headline">New Developments</h4> </article> </div> </html>

9th Jul 2018, 6:04 PM

Stefan du Toit

See: https://www.sololearn.com/discuss/1395506/?ref=app

9th Jul 2018, 6:38 PM

Janning⭐