Element.class selectors vs class selectors

Question

First of all, if there's similar question sorry, but I don't know what to write just to find this.

What is the difference of this:

p.yellow{
Background-color:yellow;
}
.yellow{
background-color:yellow;
}

///So, what is the features of element.class? I know it can only be used for p element, but so what? Will it make web faster? Why not just use class selector without specific element?

CSS and HTML is not a programing language so, sorry again. But it's still related to SoloLearn I hope it will not mark as deleted

Answer 1

Jonathan P. Jundarino wrote: "I know it can only be used for p element"

mmhh... not exactly (or you don't use the right words ^^)

'p.yellow' target (select/apply on) only p elements with class 'yellow', while '.yellow' target any element with class '.yellow'...

so, as first one is more specific than second one, it not only make it a few faster, but also allow you to write rules more specifically...

as example, we could have a class 'mystyle' wich share rules for all elements, and have some others specific to different ones:

.mystyle {
background: cyan;
}
p.mystyle {
color: red;
}
div.mystyle {
color: yellow;
}

both div and p (and any other element) with a class 'mystyle' will have a cyan background, while div will have a yellow font color but p will have a red font color (any other will keep the default font color: usually black or inherited from parent element)

more on css selectors: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors

Answer 2

Okay thanks :)

Answer 3

Sorry but

body {

}
p.ex1{
color:red;
}
.case2 .ex1{
color:blue;
}

I put p element in your .ex1 class, but it doesn't work anymore. I mean is, what's the point of putting element in class selector. I know if it's, then it's exclusive only for p element and can't be use for pre element, or for div etc..

Answer 4

What's the point of doing that, that's my question, but still thanks for time