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
Karen Spicer
5,548 PointsCascade Importance, Specificity and Order
Knowing that cascading stylesheets follow this order (with #3 being most influential on the styling of a page):
- Browser default
- External and internal style sheets (in the head section)
- Inline style (inside an HTML element)
Why do attribute selectors rank in importance and specificity over direct child combinators? Is this always true?
For example: I have already specified color, border and text decoration properties in an attribute selector for an anchor element targeting '_blank', when I apply the same properties within a child selector that targets anchor elements that are direct children of a form those changes aren't rendered in the browser.
It's my assumption that the attribute selector with an anchor targeting '_blank' is a more specific identifier than a form element targeting an anchor, thus specific attribute selectors are most influential on the page styling.
Karen Spicer
5,548 PointsTed, thanks for your help!
4 Answers
Kevin Korte
28,149 Pointsform > a has a specificity of 0002. While a[target="_blank"] has a specificity of 0011. This is the math that is going on, and why the styles are overriding as they are right now.
Speaking practically for a moment, if you're playing around with different selector types, great. And for learning purposes, this is great. But from a practical view, your styles are already becoming unnecessarily complex, which has lead you to this specificity problem. As this site grew, this type of problem would also grow. It's something to think about as you develop more. It can always be refactored.
Also, your snapshot has an error linking the css files. In the html it references a lowercase css folder, but in the file tree the folder is all caps. So when you first load up the shapshot, none of the css styles are applied as they are 404 not found when the page loads. Easy fix, just FYI.
Read more about specificity here: https://css-tricks.com/specifics-on-css-specificity/
Karen Spicer
5,548 PointsMust have had caps lock on... :/, thanks Kevin! I was in fact playing around to learn more about specificity. Greatly appreciate your help on this! The math behind form > and a[target="_blank"] satisfied my curiosity; I'll read more in the link you've provided.
Kevin Korte
28,149 PointsYou got it! Welcome to CSS Specificity hell. This was a great learning example for not only you, but for me to brush up, because I had to go back to that article I linked and figure out the specificity values before I answered.
Karen Spicer
5,548 PointsI'm in brackets. I'll create a workspace and copy the code there.
Karen Spicer
5,548 PointsHere's my code:
(https://w.trhou.se/eiq2yv3a5d)
In the selectors stylesheet the combinator selector comes after the attribute selector. However, the styles from the attribute selector are rendered in the browser. The instructor had us change the font size using the child selector, but I added additional properties to test cascading because I want to understand how it applies to attribute and combinator selectors.
```/* Attribute Selectors ------------- */
a[target="_blank"] { color: #39add1; text-decoration: none; border-bottom: 1px dotted; }
/* Combinators ------------- */
/* Creating a child selector that targets anchor elements that are children of a form: */
form > a { /* child selector */ font-size: .7em; color: #fff; text-decoration: underline; border-bottom: 1px solid; }
Karen Spicer
5,548 PointsSo because the attribute is referencing elements within the
<div id="container"> it becomes more specific than the child selector that references a class:
<form class="form-contact br"> ?
Ted Sumner
Courses Plus Student 17,967 PointsTed Sumner
Courses Plus Student 17,967 PointsWill you please post the code? You can post a snapshot by clicking the camera icon on the upper right, following the steps, and posting the URL here. Or you can copy and paste the code, but please follow the formatting on the Markdown Cheatsheet linked on this page.
Remember that an ID is always more specific than a class, which is more specific than an attribute and later styles overwrite earlier styles.