CSS Syntax Question

Hi all, Looking at the following examples, why is there a period (a dot) after the selector in the second list of examples? List One: h1 { font-size: 2.5em; /* 40px/16=2.5em */ } h2 { font-size: 1.875em; /* 30px/16=1.875em */ } p { font-size: 0.875em; /* 14px/16=0.875em */ } List Two: p.normal { font-variant: normal; } p.small { font-variant: small-caps; } ------------------------------------------------------------------- In essence, why in the second list of examples is there a dot after the paragraph selector? Why is there an indicator as to the font size after the "p." and not inside the { } brackets? If they were classes, I could understand, but they're not. Classes have the period (the dot) before the selector (I.e. .p {...}). Thanks.

p h1 h2

20th Jul 2018, 7:25 PM

Mathew McRae

5 Answers

+ 8

the dot comes before the class name and in these cases p.normal {...} p.small {...} "normal" and "small" are classes and this is a more specific selector for a paragraph element (p) with given classes it would be better if you had a HTML code as well my guess it would look something like this: <body> <h1>some text</h1> <h2>some more text</h2> <p>some paragraph text</p> <p class="normal"> some normal paragraph text </p> <p class="small"> some small paragraph text </p> </body>

20th Jul 2018, 7:38 PM

Burey