Editing a specific drowdown menu item

Hello!

I am currently trying to edit the css of a dropdown menu. I have following Inside the Square's tutorial, which has been very helpful. I am now trying to change the style of a specific item on that list, but cannot figure out which selector to use. 

This is the code I used to customize the dropdown menu...

.header-nav-folder-content {
  text-align: left !important;
  background-color: #E6E6E6 !important;
  padding-bottom: 20px !important;
}

.header-nav-folder-content a {
  padding-top: 15px !important;
  border-bottom: 1px solid black;
  text-transform: capitalize;
  color: black !important;
}

... which has resulted in this.  

Now, I would like to specifically change the style of "Test 3".

Thank you in advance! 

Hi,

I think you could target test 3 by using the third child selector - "a" of ".header-nav-folder-content". Although, without a link to view your website I can't provide a very accurate answer.

Best,

Dan

Thank you very much for that! I tried this, but I think I might be missing something. 

.header-nav-folder-content a:nth-child:(3) {
	color: red !important;
}

The website remains unpublished, so that is why I am unable to post a link. Totally understand - thanks for the help nonetheless! 

You have an extra colon at the end of your code above:

.header-nav-folder-content a:nth-child(3) {
	color: red !important;
}

You could also get more specific with your targeting:

.header-nav-folder-content .header-nav-folder-item:nth-child(3) /* a:nth-child(3) */ {
	color: red !important;
}

I've added the slashy's just in case you need to use a combination.

Thank you very much for your help! It remained unchanged, but I tried some other selectors, and this seems to work for changing the alignment and background of a specific nth-child: 

#header > div.header-announcement-bar-wrapper > div.header-inner.container--fluid.header-mobile-layout-logo-left-nav-right.header-layout-nav-right > div.header-display-desktop > div.header-title-nav-wrapper > div.header-nav > div > nav > div.header-nav-item.header-nav-item--folder.header-nav-item--active > div > div.header-nav-folder-item.header-nav-folder-item--active:nth-child(3) {
	text-align: right !important;
}