Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ General Web Design _ CSS selectors

Posted by: RogueAlpha Mar 2 2021, 08:54 PM

I am extremely new to HTML and CSS coding so there are many things that I do not understand. One thing that perplexes me is the redundancy I see in certain CSS selectors. For example, if I wanted to change the color of a heading I could input h1 {color: orange;} or I could add a class (let's call it "title" in this scenario) into the h1 element tag under the HTML code and change the color by inputting into the CSS code .title{color: orange;}. To me, this appears to do the same thing yet adding and calling a class seems redundant and makes more sense to call the tag itself. Could someone help explain what the difference between these two is if there is any?

Posted by: Christian J Mar 2 2021, 09:16 PM

With the element selector all H1 elements will be styled, but with the CLASS selector only elements with that CLASS are styled:

CODE
h1 {color: orange;}
h1.title {color: blue}

<h1>This is orange</h1>
<h1 class="title">This is blue</h1>

Another difference is that CLASS selectors can be used with any element:

CODE
.title {color: blue;}

<h1 class="title">This is blue</h1>
<p class="title">This is also blue</p>


Posted by: pandy Mar 3 2021, 12:21 AM

The first case, when we stick to H1, demonstrates specificity that is a very important part of CSS. Just using the element name (h1) has low specificity. Using the classname (.title) has higher. Using both (h1.title) even higher.

So even if the two first selectors above come after the one with both element and classname, the latter will win.

HTML
<h1 class="title">Hello world</h1>


It will be red...
CODE
h1.title    { color: red }
.title      { color: green }
h1          { color: blue }


It will be green...
CODE
.title      { color: green }
h1          { color: blue }


Otherwise, if the selectors have equally high specificity, the last rule would win. This is all part of the cascade which you may want to read more about.

Posted by: RogueAlpha Mar 3 2021, 12:19 PM

QUOTE(Christian J @ Mar 2 2021, 08:16 PM) *

With the element selector all H1 elements will be styled, but with the CLASS selector only elements with that CLASS are styled:

CODE
h1 {color: orange;}
h1.title {color: blue}

<h1>This is orange</h1>
<h1 class="title">This is blue</h1>

Another difference is that CLASS selectors can be used with any element:

CODE
.title {color: blue;}

<h1 class="title">This is blue</h1>
<p class="title">This is also blue</p>



Thank you, this makes a lot of sense and clears up my confusion smile.gif

Posted by: RogueAlpha Mar 3 2021, 12:19 PM

QUOTE(pandy @ Mar 2 2021, 11:21 PM) *

The first case, when we stick to H1, demonstrates specificity that is a very important part of CSS. Just using the element name (h1) has low specificity. Using the classname (.title) has higher. Using both (h1.title) even higher.

So even if the two first selectors above come after the one with both element and classname, the latter will win.

HTML
<h1 class="title">Hello world</h1>


It will be red...
CODE
h1.title    { color: red }
.title      { color: green }
h1          { color: blue }


It will be green...
CODE
.title      { color: green }
h1          { color: blue }


Otherwise, if the selectors have equally high specificity, the last rule would win. This is all part of the cascade which you may want to read more about.


Thank you, this makes a lot of sense and clears up my confusion smile.gif

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)