I am unable to reach this "p" tag in CSS - Html

19BEC056ANUBHAVSINGH
April 24, 2023
266 views
0 votes
2 Answers

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?

Answers

- StefancicSamuel
- April 24, 2023 at 9:19 am
- 0 votes
0
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 :
```
.box p {
yourgoodcode: code;
}
```
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.
Login or Signup to reply.