Why is my class selector not overriding tag selector?

So I've been coding for a week and I have googled for 30 min trying to find a solution. So excuse me if it's already been asked. I'm trying to write a summary of what I've learned after each lesson but it's not working!

<body> <center> h1> Module 40 </h1> </center>





<p>In this module I have learned on how to use the tag <!-- <div> ---> the purpose of this tag is to create a specific group whether it is images, headers, paragraphs, etc, which you can attribute seperate properties to so it is unaffected by tag selectors. by adding a class or ID to it. </p> <br>



<div class="p1">



 <p> Like for example this paragraph is inside a div called "p1". And I have added a specific font-size for this one compared to the previous paragraph which is affected by a <strong> tag </strong> selector instead of a <strong> class </strong> selector.

</p>



</div> 



</body>

And my CSS is this:

p

{

font-size: 15px;  

}



/*****class selector*****/

.p1

{

font-size: 20px;  

}

Shouldn't the class selector override the tag selector? Font size 15px is being applied to the whole text. It works if I add class="p1" to the second paragraph. But shouldn't this work if I add it to the div? Isn't that the purpose of having a div?

edited Jan 20 at 12:15

Temani Afif

71.9k94080

asked Jan 20 at 12:06

Alex

Before trying to gen an answer, pleas sort out your syntax., for example, in the first line, h1> needs to be <h1>. Also please don't use the <center> tag. as it is not supported on modern HTML. Use CSS to center the heading instead.

– Dragonthoughts
Jan 20 at 12:26

add a comment |

<body> <center> h1> Module 40 </h1> </center>





<p>In this module I have learned on how to use the tag <!-- <div> ---> the purpose of this tag is to create a specific group whether it is images, headers, paragraphs, etc, which you can attribute seperate properties to so it is unaffected by tag selectors. by adding a class or ID to it. </p> <br>



<div class="p1">



 <p> Like for example this paragraph is inside a div called "p1". And I have added a specific font-size for this one compared to the previous paragraph which is affected by a <strong> tag </strong> selector instead of a <strong> class </strong> selector.

</p>



</div> 



</body>

And my CSS is this:

p

{

font-size: 15px;  

}



/*****class selector*****/

.p1

{

font-size: 20px;  

}

edited Jan 20 at 12:15

Temani Afif

71.9k94080

asked Jan 20 at 12:06

Alex

Before trying to gen an answer, pleas sort out your syntax., for example, in the first line, h1> needs to be <h1>. Also please don't use the <center> tag. as it is not supported on modern HTML. Use CSS to center the heading instead.

– Dragonthoughts
Jan 20 at 12:26

add a comment |

<body> <center> h1> Module 40 </h1> </center>





<p>In this module I have learned on how to use the tag <!-- <div> ---> the purpose of this tag is to create a specific group whether it is images, headers, paragraphs, etc, which you can attribute seperate properties to so it is unaffected by tag selectors. by adding a class or ID to it. </p> <br>



<div class="p1">



 <p> Like for example this paragraph is inside a div called "p1". And I have added a specific font-size for this one compared to the previous paragraph which is affected by a <strong> tag </strong> selector instead of a <strong> class </strong> selector.

</p>



</div> 



</body>

And my CSS is this:

p

{

font-size: 15px;  

}



/*****class selector*****/

.p1

{

font-size: 20px;  

}

edited Jan 20 at 12:15

Temani Afif

71.9k94080

asked Jan 20 at 12:06

Alex

<body> <center> h1> Module 40 </h1> </center>





<p>In this module I have learned on how to use the tag <!-- <div> ---> the purpose of this tag is to create a specific group whether it is images, headers, paragraphs, etc, which you can attribute seperate properties to so it is unaffected by tag selectors. by adding a class or ID to it. </p> <br>



<div class="p1">



 <p> Like for example this paragraph is inside a div called "p1". And I have added a specific font-size for this one compared to the previous paragraph which is affected by a <strong> tag </strong> selector instead of a <strong> class </strong> selector.

</p>



</div> 



</body>

And my CSS is this:

p

{

font-size: 15px;  

}



/*****class selector*****/

.p1

{

font-size: 20px;  

}

html css css-selectors

edited Jan 20 at 12:15

Temani Afif

71.9k94080

asked Jan 20 at 12:06

Alex

edited Jan 20 at 12:15

Temani Afif

71.9k94080

asked Jan 20 at 12:06

Alex

edited Jan 20 at 12:15

Temani Afif

71.9k94080

edited Jan 20 at 12:15

Temani Afif

71.9k94080

edited Jan 20 at 12:15

Temani Afif

71.9k94080

asked Jan 20 at 12:06

Alex

asked Jan 20 at 12:06

Alex

asked Jan 20 at 12:06

Alex

Before trying to gen an answer, pleas sort out your syntax., for example, in the first line, h1> needs to be <h1>. Also please don't use the <center> tag. as it is not supported on modern HTML. Use CSS to center the heading instead.

– Dragonthoughts
Jan 20 at 12:26

add a comment |

Before trying to gen an answer, pleas sort out your syntax., for example, in the first line, h1> needs to be <h1>. Also please don't use the <center> tag. as it is not supported on modern HTML. Use CSS to center the heading instead.

– Dragonthoughts
Jan 20 at 12:26

Before trying to gen an answer, pleas sort out your syntax., for example, in the first line, h1> needs to be <h1>. Also please don't use the <center> tag. as it is not supported on modern HTML. Use CSS to center the heading instead.

– Dragonthoughts
Jan 20 at 12:26

add a comment |

4 Answers
4

active

oldest

votes

This happens because of Specificity. Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors.
You can find one of the most useful documentations here -

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

answered Jan 20 at 12:15

susanta-developer

212

add a comment |

Must be .p1 p

p

{

font-size: 15px;  

}



/*****class selector*****/

.p1 p

{

font-size: 20px;  

}

<p>In this module I have learned on how to use the tag <!-- <div> ---> the purpose of this tag is to create a specific group whether it is images, headers, paragraphs, etc, which you can attribute seperate properties to so it is unaffected by tag selectors. by adding a class or ID to it. </p> <br>



<div class="p1">



 <p> Like for example this paragraph is inside a div called "p1". And I have added a specific font-size for this one compared to the previous paragraph which is affected by a <strong> tag </strong> selector instead of a <strong> class </strong> selector.

</p>



</div>

answered Jan 20 at 12:09

Dogukan Cavus

2,9181424

add a comment |

No because your paragraph is a child of .p1

All children inherit the styling of their parent (font-size:20px), but have the ability to override this (which you did by setting the paragraph styling to font-size: 15px)

You can read more about inheritance in CSS here:
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance

answered Jan 20 at 12:09

Laurens

1,699617

add a comment |

Your <p> tag is child of <div> tag, that's why its not working. Try adding the class to <p> tag

answered Jan 20 at 12:10

Ranjit Singh

2,87811532

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54276256%2fwhy-is-my-class-selector-not-overriding-tag-selector%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

4 Answers
4

active

oldest

votes

4 Answers
4

active

oldest

votes

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

answered Jan 20 at 12:15

susanta-developer

212

add a comment |

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

answered Jan 20 at 12:15

susanta-developer

212

add a comment |

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

answered Jan 20 at 12:15

susanta-developer

212

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

answered Jan 20 at 12:15

susanta-developer

212

answered Jan 20 at 12:15

susanta-developer

212

answered Jan 20 at 12:15

susanta-developer

212

answered Jan 20 at 12:15

susanta-developer

212

add a comment |

Must be .p1 p

p

{

font-size: 15px;  

}



/*****class selector*****/

.p1 p

{

font-size: 20px;  

}

<p>In this module I have learned on how to use the tag <!-- <div> ---> the purpose of this tag is to create a specific group whether it is images, headers, paragraphs, etc, which you can attribute seperate properties to so it is unaffected by tag selectors. by adding a class or ID to it. </p> <br>



<div class="p1">



 <p> Like for example this paragraph is inside a div called "p1". And I have added a specific font-size for this one compared to the previous paragraph which is affected by a <strong> tag </strong> selector instead of a <strong> class </strong> selector.

</p>



</div>

answered Jan 20 at 12:09

Dogukan Cavus

2,9181424

add a comment |

Must be .p1 p

p

{

font-size: 15px;  

}



/*****class selector*****/

.p1 p

{

font-size: 20px;  

}

<p>In this module I have learned on how to use the tag <!-- <div> ---> the purpose of this tag is to create a specific group whether it is images, headers, paragraphs, etc, which you can attribute seperate properties to so it is unaffected by tag selectors. by adding a class or ID to it. </p> <br>



<div class="p1">



 <p> Like for example this paragraph is inside a div called "p1". And I have added a specific font-size for this one compared to the previous paragraph which is affected by a <strong> tag </strong> selector instead of a <strong> class </strong> selector.

</p>



</div>

answered Jan 20 at 12:09

Dogukan Cavus

2,9181424

add a comment |

Must be .p1 p

p

{

font-size: 15px;  

}



/*****class selector*****/

.p1 p

{

font-size: 20px;  

}

<p>In this module I have learned on how to use the tag <!-- <div> ---> the purpose of this tag is to create a specific group whether it is images, headers, paragraphs, etc, which you can attribute seperate properties to so it is unaffected by tag selectors. by adding a class or ID to it. </p> <br>



<div class="p1">



 <p> Like for example this paragraph is inside a div called "p1". And I have added a specific font-size for this one compared to the previous paragraph which is affected by a <strong> tag </strong> selector instead of a <strong> class </strong> selector.

</p>



</div>

answered Jan 20 at 12:09

Dogukan Cavus

2,9181424

Must be .p1 p

p

{

font-size: 15px;  

}



/*****class selector*****/

.p1 p

{

font-size: 20px;  

}

<p>In this module I have learned on how to use the tag <!-- <div> ---> the purpose of this tag is to create a specific group whether it is images, headers, paragraphs, etc, which you can attribute seperate properties to so it is unaffected by tag selectors. by adding a class or ID to it. </p> <br>



<div class="p1">



 <p> Like for example this paragraph is inside a div called "p1". And I have added a specific font-size for this one compared to the previous paragraph which is affected by a <strong> tag </strong> selector instead of a <strong> class </strong> selector.

</p>



</div>

p

{

font-size: 15px;  

}



/*****class selector*****/

.p1 p

{

font-size: 20px;  

}

<p>In this module I have learned on how to use the tag <!-- <div> ---> the purpose of this tag is to create a specific group whether it is images, headers, paragraphs, etc, which you can attribute seperate properties to so it is unaffected by tag selectors. by adding a class or ID to it. </p> <br>



<div class="p1">



 <p> Like for example this paragraph is inside a div called "p1". And I have added a specific font-size for this one compared to the previous paragraph which is affected by a <strong> tag </strong> selector instead of a <strong> class </strong> selector.

</p>



</div>

p

{

font-size: 15px;  

}



/*****class selector*****/

.p1 p

{

font-size: 20px;  

}

<p>In this module I have learned on how to use the tag <!-- <div> ---> the purpose of this tag is to create a specific group whether it is images, headers, paragraphs, etc, which you can attribute seperate properties to so it is unaffected by tag selectors. by adding a class or ID to it. </p> <br>



<div class="p1">



 <p> Like for example this paragraph is inside a div called "p1". And I have added a specific font-size for this one compared to the previous paragraph which is affected by a <strong> tag </strong> selector instead of a <strong> class </strong> selector.

</p>



</div>

answered Jan 20 at 12:09

Dogukan Cavus

2,9181424

answered Jan 20 at 12:09

Dogukan Cavus

2,9181424

answered Jan 20 at 12:09

Dogukan Cavus

2,9181424

answered Jan 20 at 12:09

Dogukan Cavus

2,9181424

add a comment |

No because your paragraph is a child of .p1

All children inherit the styling of their parent (font-size:20px), but have the ability to override this (which you did by setting the paragraph styling to font-size: 15px)

You can read more about inheritance in CSS here:
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance

answered Jan 20 at 12:09

Laurens

1,699617

add a comment |

No because your paragraph is a child of .p1

All children inherit the styling of their parent (font-size:20px), but have the ability to override this (which you did by setting the paragraph styling to font-size: 15px)

You can read more about inheritance in CSS here:
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance

answered Jan 20 at 12:09

Laurens

1,699617

add a comment |

No because your paragraph is a child of .p1

All children inherit the styling of their parent (font-size:20px), but have the ability to override this (which you did by setting the paragraph styling to font-size: 15px)

You can read more about inheritance in CSS here:
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance

answered Jan 20 at 12:09

Laurens

1,699617

No because your paragraph is a child of .p1

All children inherit the styling of their parent (font-size:20px), but have the ability to override this (which you did by setting the paragraph styling to font-size: 15px)

You can read more about inheritance in CSS here:
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance

answered Jan 20 at 12:09

Laurens

1,699617

answered Jan 20 at 12:09

Laurens

1,699617

answered Jan 20 at 12:09

Laurens

1,699617

answered Jan 20 at 12:09

Laurens

1,699617

add a comment |

Your <p> tag is child of <div> tag, that's why its not working. Try adding the class to <p> tag

answered Jan 20 at 12:10

Ranjit Singh

2,87811532

add a comment |

Your <p> tag is child of <div> tag, that's why its not working. Try adding the class to <p> tag

answered Jan 20 at 12:10

Ranjit Singh

2,87811532

add a comment |

Your <p> tag is child of <div> tag, that's why its not working. Try adding the class to <p> tag

answered Jan 20 at 12:10

Ranjit Singh

2,87811532

Your <p> tag is child of <div> tag, that's why its not working. Try adding the class to <p> tag

answered Jan 20 at 12:10

Ranjit Singh

2,87811532

answered Jan 20 at 12:10

Ranjit Singh

2,87811532

answered Jan 20 at 12:10

Ranjit Singh

2,87811532

answered Jan 20 at 12:10

Ranjit Singh

2,87811532

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Brtdku