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 trialLuke Markham
Front End Web Development Techdegree Graduate 17,289 PointsSpecificity in JS
does JS follow the same/similar Specificity as CSS?
As in... our li is styled by tag to purple then we give other li a class which is more specific than a tag.
Would it be correct to assume it's exactly the same as CSS or ..?
4 Answers
Steven Parker
231,248 PointsSince you're not establishing cascade rules in JavaScript, the "specificity" aspect of CSS would not apply. If you make two different changes to an element, they would both be performed. Or if they set the same property, the one done later just resets the first one.
Update: Now that I've seen the code, I can tell you that the JavaScript isn't really involved other than changing the attributes. So yes, the CSS rules still apply since the styling effects you are seeing here are still just pure CSS.
Luke Markham
Front End Web Development Techdegree Graduate 17,289 PointsHighly appreciate your answers guys! :D
Steven Parker
231,248 PointsLuke Markham — — Glad to help. You can mark the question solved by choosing a "best answer".
And happy coding!
Kevin Gates
15,053 PointsHi Luke, it doesn't cascade like CSS where later lines of code necessarily overrule the earlier lines of code. However by default most JavaScript is synchronous, so the code on line 1 will process before the code on line 2.
__
However, JavaScript programming can also be asynchronous, which means you could have some code start processing on line 1 (ping an API), then move and start something on line 2 (ping another API).
You could have event listeners for both of those events (from line 1 and 2). It could be the case with asynchronous programming that the event from line 2 returns before the event in line 1.
Luke Markham
Front End Web Development Techdegree Graduate 17,289 PointsHi thanks for the replies, sorry I wasn't more specific (pun not intended :D)
HTML:
<ul>
<li>grapes</li>
<li class="error-not-purple">orange</li>
<li>amethyst</li>
<li class="error-not-purple">orange</li>
<li>lavender</li>
<li>plums</li>
<li class="error-not-purple">orange</li>
</ul>
JS
const myList = document.getElementsByTagName ('li');
const errorNotPurple = document.getElementsByClassName ('error-not-purple')
for (i = 0; i < myList.length ; i++ ) {
myList[i].style.color = 'purple';
}
for (i = 0; i < myList.length ; i++ ) {
errorNotPurple[i].style.color = 'orange';
}
As you can see all the "li' are turned purple then the ones with a "class" are turned orange because classes are more specific. Like if I used an "!important" and changed them all to green.. Can you see what I'm getting at here ? Can I assume that all the same rules apply?
Steven Parker
231,248 PointsI updated my answer.
Kevin Gates
15,053 PointsAlso, your Markdown is almost perfect. However, next time if you do this: backtick backtick backtick [Name of language: js, c#, html, etc] //your code backtick backtick backtick
If you do that it'll change your code to the proper format, like this:
Your HTML
<ul>
<li>grapes</li>
<li class="error-not-purple">orange</li>
<li>amethyst</li>
<li class="error-not-purple">orange</li>
<li>lavender</li>
<li>plums</li>
<li class="error-not-purple">orange</li>
</ul>
and
Your JavaScript
const myList = document.getElementsByTagName ('li');
const errorNotPurple = document.getElementsByClassName ('error-not-purple')
for (i = 0; i < myList.length ; i++ ) {
myList[i].style.color = 'purple';
}
for (i = 0; i < myList.length ; i++ ) {
errorNotPurple[i].style.color = 'orange';
}