in the example below the output "hello" is green. How can I make it blue using an inline style on the outer div. I tried <div style="color:blue!important;"> with no joy. I have a use case where the inline style within the div specifically needs to change the color of the text(WYSIWYG) within the div. I don't want to apply the inline style to the p or h1 tags in this instance. Wondering can you reduce the specificity of the p tag even? Thanks
<!DOCTYPE html>
<html>
<head>
<style>
p{color: green;}
</style>
</head>
<body>
<div style="color:blue!important;">
<p>hello</p>
</div>
</body>
</html>
as far as I know, priority of styling exact element is higher that inheritance from it's parent, so you cannot change style of element by it's parent while it has style on it's own you can style it in style tag like this :
in this case priority of blue is higher and you are telling browser that you want to style p tag that is inside of div