Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialja5on
10,338 PointsThe tutor is creating another .title selector one towards the start of CSS page and one by the media queries
can you write two same selectors within one CSS page.
As in the title here its one is by the beginning of the css page and one is towards the end by the media queries. They are both coded differently but they are .title (the same selector)
why not just write code within one selector.
the second .title isnt inside any curly braces or anything like that either it stands alone as the first one does.
See Basic Css, 05:00 minutes into Adjusting the Layout
2 Answers
Rabin Gharti Magar
Front End Web Development Techdegree Graduate 20,928 PointsHey jasonj7,
If you are targetting a class
with .title
twice outside of media queries
, you'll get a different outcome:
.title {
color: red;
}
.title {
color: blue;
}
In the above example, both have an identical selector and therefore carry the same specificity, so the last one will win and therefore the colour of .title
will be blue.
To learn more about how cascade
& specificity
works, check out this link: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance
But if you select the same selector
twice, outside of media queries
and inside of media queries
you'll see the results in certain breakpoints
.
For example:
.title {
color: red;
}
@media(min-width: 768px) {
.title {
color: blue;
}
}
In this example, color of .title
will be red
when the browser window is less than 768px
and when the browser window is 768px
or higher
the color of .title
will turn into blue.
To learn more about how media queries
works, check out this link: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Hope this helps!
Happy Coding!!
ja5on
10,338 Pointsoh yes i completed this and its my fault, i forgot that the code in question is inside a media query, thanks rabin for your reply, sometimes i get code blindness... :-)