The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> CSS selectors, Confusion about aspects of CSS selectors
RogueAlpha
post Mar 2 2021, 08:54 PM
Post #1





Group: Members
Posts: 3
Joined: 2-March 21
Member No.: 27,831



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?

This post has been edited by RogueAlpha: Mar 2 2021, 08:56 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 2 2021, 09:16 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



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>

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 3 2021, 12:21 AM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RogueAlpha
post Mar 3 2021, 12:19 PM
Post #4





Group: Members
Posts: 3
Joined: 2-March 21
Member No.: 27,831



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RogueAlpha
post Mar 3 2021, 12:19 PM
Post #5





Group: Members
Posts: 3
Joined: 2-March 21
Member No.: 27,831



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

This post has been edited by RogueAlpha: Mar 3 2021, 12:19 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 01:57 AM