In the example given in this exercise, why would we want to use the `.brand` selector rather than the `p` selector to target our paragraph?


#1

Question

In the example given in this exercise, why would we want to use the .brand selector rather than the p selector to target our paragraph?

Answer

The code snippet used in this exercise is purely for demonstrative purpose. However, you can imagine a project where we had multiple <p> elements. Say we only wanted to target a fraction of those elements for styling. We could apply a class attribute specifically to the <p> tags containing the text we wanted to style. In this case, we target the <p> elements we want to style while ignoring those <p> elements we do not want to style.

More generally, this example illustrates how we can use classes to more narrowly target groups of elements.


FAQ: Learn CSS Selectors Visual Rules - CSS Setup Selectors - Class Name
#2

Do variables on computers work like this?, we could have a class and appy changes not only to the class but also to other elements that are out of that class, such as parts and sections of a program or an app?
I’m sorry if this is a too confused question


#5

What do you mean by computer variables?


#6

Thanks for the insight!


#7

Someone please explain to me why this style for

not active when I add a CSS selector:
In HTML file

Top Vacation Spots

In file style.CSS, I code that: h1 { color: maroon; } .title { color: teal; font-size: 40 px; } why the text "Top Vacation Spots" isn't maroon in colour and it changes to color teal ??? Maybe there is an order between tag

and class attribute when we style it in CSS?


#8

the use of the “.title” selector overwrites the “h1” selector.


#9

CSS reads code like we read books, left to right, top to bottom. Lets say you read this sentence

Rodger’s hair is blue.

Then you read this one

Actually, it’s green.

Roger’s hair is now green rather than blue, even though blue came first. I hope this makes sense, I’m not anything close to an expert on CSS or any code for that matter, but thats one way of understanding it.


#10

Your example make me feel more easier to understand my problem. Thank you so much :heart_eyes::heart_eyes::heart_eyes:

Vào 10:41, CN, 24 Th2, 2019 Monsterunderthebed via Codecademy Forums codecademy@discoursemail.com đã viết:


#11

While you are correct on how CSS reads it’s content, this is not the reason for the behavior @changpham is experiencing. If you define the .title (class) selector above the h1 (element) selector, your page will still render the .title definition rather than the h1 definition. This is because in CSS, class selectors have a higher precedence than element selectors, so your class will always override your element no matter where it’s defined in the stylesheet. However, if you had multiple .title selector definitions, your page would render the final definition of it as you had stated.

CSS selector hierarchy: #ID > .Class > Element


#12

Sorry for the silly question, but what’s #ID for? Inline element or?? Thanks in advance!


#13

Hello @simcam ,

ID is an HTML attribute used to uniquely identify an element. Let’s say you want to add a style for 1 particular button, but do not want to make this change to other your buttons. You would NOT target a class because that would make the change to every element using that class. You also wouldn’t target the button element because that would implement this change for all button. Instead, you target the button by it’s ID because it’s unique and will only make a change to that one button. Hope this makes sense!

Sincerely,
Andrew