CODEWITHSUNDEEP
htmlcsscss-selectors
jamie
jamie

Reputation: 152

last child selector not working

I'm having a bit of an issue with last child. I have a dropdown nav and need to make the last dropdown align differently than the rest since the text is getting cut off.

My CSS for a normal dropdown looks like so:

.mainnav ul > li > ul {
  padding: 0;
  position: absolute;
  top: 43px;
  left: -20px;
  padding-top: 10px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  max-height: 0px;
  overflow: hidden;
  -webkit-transiton: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
  -transition: all 0.4s;

}

and when I adjust for the last dropdown I tried to use:

.mainnav ul > li > ul:last-child{
  padding: 0;
  position: absolute;
  top: 43px;
  left: -120px;
  padding-top: 10px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  max-height: 0px;
  overflow: hidden;
  -webkit-transiton: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
  -transition: all 0.4s; 
}

But when I put that in it effects all the dropdowns. You can see the test site here: http://xeroproject.com/runa_tea/

I'm trying to adjust the IMPACT dropdown.

Thanks for any help.

Upvotes: 0

Views: 128

Answers (1)

T J
T J

Reputation: 43156

.mainnav ul > li > ul:last-child selects all <ul> that's the last child of elements which match the selector.

For targeting the <ul> in last <li>

use

.mainnav ul > li:last-child > ul{

Instead of

.mainnav ul > li > ul:last-child{

Upvotes: 2

Related Questions