CSS selectors, Confusion about aspects of CSS selectors |
CSS selectors, Confusion about aspects of CSS selectors |
RogueAlpha |
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 |
Christian J |
Mar 2 2021, 09:16 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,656 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> |
pandy |
Mar 3 2021, 12:21 AM
Post
#3
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 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. |
RogueAlpha |
Mar 3 2021, 12:19 PM
Post
#4
|
Group: Members Posts: 3 Joined: 2-March 21 Member No.: 27,831 |
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 |
RogueAlpha |
Mar 3 2021, 12:19 PM
Post
#5
|
Group: Members Posts: 3 Joined: 2-March 21 Member No.: 27,831 |
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 This post has been edited by RogueAlpha: Mar 3 2021, 12:19 PM |
Lo-Fi Version | Time is now: 25th April 2024 - 12:39 PM |