CODEWITHSUNDEEP
htmlcsscss-selectorsmura
Roberto Flores
Roberto Flores

Reputation: 789

How to target the 7th child only

Problem I have the following code that displays the navigation bar that is provided by Mura:

#$.dspPrimaryNav(
viewDepth=0
, id='navPrimary'
, class='nav navbar-nav nav-nowrap'
, displayHome='never'
, closeFolders=false 
, showCurrentChildrenOnly=false
, liHasKidsClass='dropdown'
, liHasKidsAttributes=''
, liCurrentClass=''
, liCurrentAttributes=''
, liHasKidsNestedClass='dropdown-submenu'
, aHasKidsClass='dropdown-toggle'
, aHasKidsAttributes='role="button" data-toggle="dropdown" data-target="##"'
, aCurrentClass=''
, aCurrentAttributes=''
, ulNestedClass='dropdown-menu'
, ulNestedAttributes=''
, aNotCurrentClass=''
, siteid=$.event('siteid')
)#

And the displays the following navigation bar: enter image description here

As you can see above, the second row of the navigation bar is shifted to the right. I tried the following css to align the second row with the first row of the navigation bar:

#navPrimary ul:nth-child(3n+1){
    margin-left:-15px;
}

However, it is not working. Any help would be appreciated.

Upvotes: 1

Views: 2525

Answers (2)

Vishal Kumar Sahu
Vishal Kumar Sahu

Reputation: 1396

:nth-child(N) psuedo selector, where N = sequence of the child, can select the child node of an element. To select 7th child us N=7 in your selector. Solution to your problem been-

#navPrimary ul li:nth-child(7){
  // Your style rules here...
}

Reference: CSS Tricks

Upvotes: 2

Axion
Axion

Reputation: 722

You can use the following css to target the 7th item of the list. I assume all of the links are part of the same list so I changed the ul to li. 

#navPrimary li:nth-child(7){
    margin-left:-15px;
}

Upvotes: 3

Related Questions