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
Gillian Draper
3,057 PointsConfused about what elements to include in the hierarchy of css selectors
Hi - Re: the tutorial 'style the image captions' - part of 'How to Make a Website'. In this tutorial, when choosing a particular selector, we had to include every element in a hierarchy of elements i.e. '#gallery li a p'. Can someone explain why we can't just put '#gallery p' and skip the li a attributes that are 'along the way'? Earlier in 'How to Make a Website' we only needed to put 'nav a' and could skip all the elements in between i.e. we did not need to put 'nav ul li a'. I would be grateful if you could explain the difference in the rules between the two cases.
Also, when using the ID elements in the tutorial, we only need to specify the ID element in CSS e.g. '#wrapper' without putting any elements in front of it (e.g. 'a #wrapper'). However, when using a class, we seem to need to put the hierarchy in front of it e.g. 'nav a.selected' rather than just '.selected'. Has this got something to do with parent and child elements?
Thank you.
4 Answers
egaratkaoroprat
16,630 PointsHi Gillian
You really think a lot during the course... Great!
The hierarchy used in #gallery li a p is the reason that you might want to add a description text outside of the list, but still in the gallery and want to style it differently. So you will probably use #gallery p - but in this case you have to make sure that it is defined before #gallery li a p, because of its cascading effect otherwise your p elements in the list get overwritten.
If you need a class just for a specific element, then you don't have to point it out that precisely. A good rule of thumb is not to use more than 3 hierarchic elements (as I have read it somewhere). Also, the course might want to demonstrate the usage and how the things work together. As you progress, you will learn new things and also be interested in reading articles outside of the course to keep yourself in shape and begin to have a lot of light bulb moments.
About why ID's don't have to be specified with a hierarchy: Only one ID is allowed in a document - that's only the reason. So you won't be able to select more than one ID in a document. Theoretically, you will be able to set more than one ID with the same name in a document, but this is not HTML conform and will cause the validator to spit out some error messages.
Hope this helps!
Feel free to ask, if you are still confused.
Gillian Draper
3,057 PointsHi Egarat
Many thanks for your explanation.
Kind regards
Gill
Jesus Mendoza
23,289 PointsHey Gillian,
- IDs are unique so there is no need to specify the element type or add hierarchy.
- If you are selecting an element without class or id then you must be really specific to avoid unexpected behavior.
- In the case of classes, you can have multiple elements with the same clases. It's better if you are as specific as possible to avoid unexpected behavior but is not required.
Gillian Draper
3,057 PointsDear Jesus
Many thanks - you've both been very helpful.
Kind regards
Gill