css is not applied using this rule "element element". whats the issue in this code?

Question

the CSS rule which says element element according to this link http://www.w3schools.com/cssref/css_selectors.asp is not applied in below code . What's the issue in this ?

 <!DOCTYPE html>
    <html>
    <head>
    <style>
    p div{
        text-align: center;
        color: red;
    }
    </style>
    </head>
    <body>
    
    <h1 class="">This heading will not be affected</h1>
    <p><div class="center">This paragraph will be red and center-aligned.</div></p>
    
    </body>
    </html>

possible duplicate of this : http://stackoverflow.com/questions/8397852/why-p-tag-cant-contain-div-tag-inside-it — Minal Chauhan, Nov 17 '16 at 09:04

score 4 · Accepted Answer · answered Nov 17 '16 at 09:04

4

It's not the rule, per se, it's the HTML, which is invalid. You can't wrap a <div> inside a <p>. Put the <p> inside the <div> and swap the rule to div p { and it will work.

answered Nov 17 '16 at 09:04

junkfoodjunkie

3,168
1
19
33

Yeah , that gives me clear understanding to me Why Question , Thanks :) – Vishnu Shekhawat Nov 17 '16 at 09:09

score 2 · Answer 2 · answered Nov 17 '16 at 09:07

2

Small syntax changes ;-)

<!DOCTYPE html>
<html>
<head>
    <style>
        p.red{
            text-align: center;
            color: red;
        }
    </style>
</head>
<body>

<h1 class="">This heading will not be affected</h1>
<p class="red">This paragraph will be red and center-aligned</p>

</body>
</html>

answered Nov 17 '16 at 09:07

Anna Jeanine

3,975
10
40
74

I know this way is there , but i just want to know why my code didnt worked :) – Vishnu Shekhawat Nov 17 '16 at 09:10

css is not applied using this rule "element element". whats the issue in this code?

2 Answers2