I want to target the h1 tag here (3rd line) but I am unable to do so with these selectors
.box p h1 {
background-color: red;
}
/* or with this */
p h1 {
background-color: red;
}<div class="box">
<p>
<h1>Make your todo list</h1>
</p>
<div class="area">
<div class="slice a">
<div class="button"></div>
<p>Abcde</p>
</div>
<div class="slice b">
<div class="button"></div>
<p>Fghij</p>
</div>
<div class="slice c">
<div class="button"></div>
<p>Klmno</p>
</div>
<div class="slice d">
<div class="button"></div>
<p>Pqrst</p>
</div>
<div class="slice e">
<div class="button"></div>
<p>Uvwxyz</p>
</div>
</div>
</div>Infact, Even when I target all the “p” tags, even in that case the required one doesn’t get selected. I can select it if i directly target “h1” tag but I wanna target the “p” itself so that I can move it around. What am I doing wrong here?
2
Answers
There could be multiple things that make you unable to do it, first, try to remove the h1 tag and try to apply it direct to the p object as it follows :
To give a little explaination, it’s because the p tag in your css is wrapped in another block-level element, which cause him to not be "seen" by your css.
A
<h1>element inside a<p>is invalid HTML.stackExchange