Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Basics (2014) Enhancing the Design With CSS Adjusting the Layout with Media Queries

The 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

Hey 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!!

oh 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... :-)