h1{} and h1, h1{} differences on css

Question

I would like to know what the differences between (it always choose pink and green):

h1 {color:red;}
h1, h1 {color:pink;}
p {color:blue;}
p, p {color:green;}

Moreover in this example the hover does not work

a, a:visited {
color:green;
text-decoration:none;
outline:none;
}

a:hover{
color: red;
}

Possible duplicate of [What do commas and spaces in multiple classes mean in CSS?](https://stackoverflow.com/questions/3344284/what-do-commas-and-spaces-in-multiple-classes-mean-in-css) — Abhishek Pandey, Jan 10 '18 at 09:29
Check this: https://www.w3schools.com/cssref/css_selectors.asp — Kannan K, Jan 10 '18 at 09:31

score 2 · Accepted Answer · edited Jan 10 '18 at 10:28

You can apply rules to multiple selectors using , for instance.

h1, p { color: red; }

Here you are doing.

h1, h1 { color: red; }

Above code will set red color to both h1 and h1 elements,but as both are same selector, the second selector will be useless.

The only reason you have pink h1 is because the last rule wins when the specificity is the same.

h1, h1 {color:pink;}
h1 {color:red;}

This would give a red color to h1.

1 Answers1