1

I want to override the css of <h1> and <h2> using selector (specific using selector only) but it's not working. It's getting only applied to one class only <h1> color changes to green not <h2>.

Please help can someone tell me where I am wrong. Please help!

.temp {
  color: blue;
}
.temp2 {
  color: red;
}
p .temp,.temp2{
  color: green !important;
}
<p>
  hi there this is a test page
<h1 class="temp">heading inside p tag</h1>
<h2 class="temp2">2nd heading inside p tag</h2>

</p>
0stone0
  • 34,288
  • 4
  • 39
  • 64
sagar
  • 11
  • 1
  • Does this answer your question? [Why can't I use a heading tag inside a p tag and style it with CSS?](https://stackoverflow.com/questions/38891822/why-cant-i-use-a-heading-tag-inside-a-p-tag-and-style-it-with-css) – 0stone0 Feb 15 '22 at 12:41
  • 1
    You're not suppost to have `h` elements inside a `p`! – 0stone0 Feb 15 '22 at 12:42
  • yes I can do this using .temp, .temp2 but i want to specifically use p selector( like temp temp2 class that is contained inside a p tag specifically. – sagar Feb 15 '22 at 12:44
  • Please read the second linked post. This is against the HTML spec, so you just can't/shouldn't do that. – 0stone0 Feb 15 '22 at 12:46
  • your html is invalid you can't include an h1 inside a p [check](https://caninclude.glitch.me/caninclude?child=h1&parent=p) – Sfili_81 Feb 15 '22 at 12:46
  • thanks guys got my mistake now i have wrapped h1 and h2 inside div now its working fine. thanks for your help all much appreciated – sagar Feb 15 '22 at 12:52

3 Answers3

-1

Try this:

.temp {
  color: blue;
}
.temp2 {
  color: red;
}
div .temp,
div .temp2{
  color: green !important;
}
<div>
    hi there this is a test page
    <h1 class="temp">heading inside p tag</h1>
    <h2 class="temp2">2nd heading inside p tag</h2>
</div>
ninja_corp
  • 448
  • 4
  • 5
  • thanks ninja. but I have a doubt I am new to css I want to ask why we need to write div with temp2 why we can't do like this div .temp,.temp2 { some styling} – sagar Feb 15 '22 at 13:07
-1

.temp {
  color: blue;
}
.temp2 {
  color: red;
}
span .temp, .temp2{
  color: green !important;
}
<span>
  hi there this is a test page
<h1 class="temp">heading inside p tag</h1>
<h2 class="temp2">2nd heading inside p tag</h2>
</span>

Answer:

  • putting h1/h2 content inside p is invalid (You might have noticed in Stack overflow's snippet editor)
  • Imagine having a huge heading inside small paragraph
  • so change to span/div/etc (in html+css)
Neptotech -vishnu
  • 1,096
  • 8
  • 23
-2

You have missed to mention the paragraph element for temp2

.temp {
  color: blue;
}
.temp2 {
  color: red;
}
p .temp,p .temp2{
  color: green !important;
}
<p>
  hi there this is a test page
<h1 class="temp">heading inside p tag</h1>
<h2 class="temp2">2nd heading inside p tag</h2>

</p>
0stone0
  • 34,288
  • 4
  • 39
  • 64
Hari
  • 64
  • 7
  • inline styling gets the highest priority, after that selector based on id of an element gets high priority. EG : .temp { color: blue; } .temp2 { color: red; }

    hi there this is a test page

    heading inside p tag

    2nd heading inside p tag

    ! important is not an nice idea     – Hari Feb 15 '22 at 12:41
  • 1
    your solution is not woorking. – sagar Feb 15 '22 at 12:42
  • I have updated your answer to include a snippet. Now you can see that it won't work like that. – 0stone0 Feb 15 '22 at 12:43