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

JavaScript JavaScript and the DOM (Retiring) Getting a Handle on the DOM Selecting Elements with the Same Class Name

Luke Markham
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Luke Markham
Front End Web Development Techdegree Graduate 17,289 Points

Specificity 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
Steven Parker
231,271 Points

Since 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.

Steven Parker
Steven Parker
231,271 Points

Luke Markham — — Glad to help. You can mark the question solved by choosing a "best answer".
And happy coding!

Kevin Gates
Kevin Gates
15,053 Points

Hi 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
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Luke Markham
Front End Web Development Techdegree Graduate 17,289 Points

Hi 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?

Kevin Gates
Kevin Gates
15,053 Points

Also, 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';

 }