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 trial

CSS CSS Transitions and Transforms Getting Started with CSS Transforms Creating a Slide Transition

Gerald Susanteo
seal-mask
.a{fill-rule:evenodd;}techdegree
Gerald Susanteo
Front End Web Development Techdegree Student 7,117 Points
Posted by Gerald Susanteo
.a{fill-rule:evenodd;}techdegree
Gerald Susanteo
Front End Web Development Techdegree Student 7,117 Points

Creating rules, without and with commas

in this video Gill didnt use commas when hes writing some rules for example .slide:hover img .slide .photo-overlay but then he also writes it e.g .slide .photo-overlay, .slide img

my question is why didn't he write it? what affects does it make when you don't add the comma and when you do add the comma.

1 Answer

Gergely Bocz
Gergely Bocz
14,244 Points
Gergely Bocz
Gergely Bocz
14,244 Points

Hi Gerald!

Commas are used as separators between selectors in CSS. So take this for example:".slide .photo-overlay" and ".slide, .photo-overlay". In this case, the first selectors selects those elements that have the .photo-overlay class and are the descendents of elements wih the .slide class, so basically it complicates the selectors, it makes the selectors more specific. The second selector however is a list of selectors. It selects elements that have the .slide class then it selects elements that have the .photo-overlay class, and there is no need to have any sort of relationship between those.

Using CSS selectors according to the first example is generally advised because the more specific a selectors is, the better control you have over what gets selected.

Using CSS selectors according to the second example can be useful, if you have many things that should look very similar. In practice i most often define multiple selectors on one line to set global-like properties, like so:

html, body{
 margin: 0;
 padding: 0;
}

h1, h2, h3, h4, h5, h6{
 font-family: "Times New Roman", Times, serif;
}

Hope i could make it a little cleaner for you! If you still have questions, feel free to ask!