0

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?

9th Jul 2018, 5:39 PM
Stefan du Toit
Stefan du Toit - avatar
6 ответов
+ 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
Toni Isotalo - avatar
+ 2
Because "New Developments" is not inside "aside" element
9th Jul 2018, 5:49 PM
Toni Isotalo
Toni Isotalo - avatar
0
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
Stefan du Toit - avatar
0
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
Stefan du Toit - avatar
0
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
Stefan du Toit - avatar
9th Jul 2018, 6:38 PM
Janning⭐
Janning⭐ - avatar