first-child was not workded in css

Question

The below was the html and css code, and I want to ask the question: why the first-child does not work? Who can tell me,I will appreciate for your answer.

.footerLinks {
  margin:0 auto;
  list-style: none;
}
.show{
  display: inline-block;
  zoom:1;
  *display:inline;
  color:#eee;
  padding:4px 14px;
  border-top:1px solid rgba(0,0,0,0);
  border-left:1px solid red;
}
.footerLinks li a:hover{
  color: red;
  border-top:1px solid #fff;  
}
.footerLinks .show:first-of-type{
  border-left:none;
}

<nav role='navigation'>
  <ul class="footerLinks">
    <li class="show-first"><a href="#">Home</a></li>
    <li class="show"><a href="#">About</a></li>
    <li class="show"><a href="#">Clients</a></li>
    <li class="show"><a href="#">Contact Us</a></li>
  </ul>
</nav>

Are you compiling in regular css or in [sass](http://sass-lang.com/)? — Ethan, May 05 '17 at 08:41
@David I am sorry, I compiling in less, but I choose it into css, it still does not work yet. — Feng Li, May 05 '17 at 08:45
@FengLi In this case, it won't work in CSS like this, use `.element:before {}` and `.element:hover{}` instead — node_modules, May 05 '17 at 08:47
Possible duplicate of [:first-child not working as expected](http://stackoverflow.com/questions/4505686/first-child-not-working-as-expected) — Sahil Dhir, May 05 '17 at 09:03
@snkv I want to set the '.show' selector first element css style by ":first-child", not others — Feng Li, May 05 '17 at 09:03
@GabrielCheung I change into first-of-type, but it does not work yet — Feng Li, May 05 '17 at 10:10

Leong Chee Siong · Answer 1 · 2017-05-05T09:05:10.547

1

.footerLinks {
  margin:0 auto;
  list-style: none;
}
.show{
  display: inline-block;
  zoom:1;
  *display:inline;
  color:#eee;
  padding:4px 14px;
  border-top:1px solid rgba(0,0,0,0);
  border-left:1px solid red;
}
.footerLinks li:first-child{
 border-left:none;
}

<nav role='navigation'>
  <ul class="footerLinks">
    <li class="show first"><a href="#">Home</a></li>
    <li class="show"><a href="#">About</a></li>
    <li class="show"><a href="#">Clients</a></li>
    <li class="show"><a href="#">Contact Us</a></li>
  </ul>
</nav>

edited May 05 '17 at 09:05

answered May 05 '17 at 08:53

Leong Chee Siong

66
3

I have a condition, every line has different style, but contain two line has the same style, and the second line's margin-bottom was none, so this solution does not suit me. thanks very much – Feng Li May 05 '17 at 10:07

Gabriel Cheung · Answer 2 · 2017-05-05T09:04:52.447

In your case, it should be :first-of-type instead of :first-child since you have a different class as the first-child of the ul.

Example:

&:first-of-type {
      border-left:none;
  }

Or you can move the first li element out of the ul like below.

.footerLinks {
  margin:0 auto;
  list-style: none;
}
.show{
  display: inline-block;
  zoom:1;
  *display:inline;
  color:#eee;
  padding:4px 14px;
  border-top:1px solid rgba(0,0,0,0);
  border-left:1px solid red;
  &:hover {
      color:#fff;
      border-top:1px solid #fff;
  }
  
}
.show:first-child {
   border-left:none;
}

<nav role='navigation'>
    <div class="show-first"><a href="#">Home</a></div>
  <ul class="footerLinks">
    <li class="show"><a href="#">About</a></li>
    <li class="show"><a href="#">Clients</a></li>
    <li class="show"><a href="#">Contact Us</a></li>
  </ul>
</nav>

The reason is that, if you use :first-child selector with class, it behaves more like li:first-child.class-name. So if your first-child does not have a correct class name, it fails.

It still does not work yet after I changed the "first-of-type" from "first-child" — Feng Li, May 05 '17 at 10:08

score 0 · Answer 3 · answered May 05 '17 at 08:58

You have wrong syntax. &:hover {} is not valid css code. You can use & in SASS or LESS or other preproccesor, but not pure CSS. You probably don't need that "show-first" class and do it with :first-child.

Working code:

.footerLinks {
  margin:0 auto;
  list-style: none;
}
.show{
  display: inline-block;
  zoom:1;
  display:inline;
  color:#eee;
  padding:4px 14px;
  border-top:1px solid rgba(0,0,0,0);
  border-left:1px solid red;
}
.show:hover {
    border-top:1px solid #fff;
}
.show:hover a {
    color:#fff;
}
.show:first-child {
    border-left:none;
}

<nav role='navigation'>
  <ul class="footerLinks">
    <li class="show"><a href="#">Home</a></li>
    <li class="show"><a href="#">About</a></li>
    <li class="show"><a href="#">Clients</a></li>
    <li class="show"><a href="#">Contact Us</a></li>
  </ul>
</nav>

I runed in less environment, post it into the snippet, forget to change it into css, I already changed the question。Thanks for you help me to find the error。 — Feng Li, May 05 '17 at 09:09

score 0 · Answer 4 · answered May 05 '17 at 09:09

Your main problem here is the class of your first li item. It is set to .show-first , when all the others are set to only .show. You must change your class to .show.first so that .first can be a modulator-class and not a whole new class name as .show-first.

The first-child selector works fine, it just needs to see that first .show class, thats all.

.footerLinks {
  margin:0 auto;
  list-style: none;
}
.show{
  display: inline-block;
  zoom:1;
  *display:inline;
  color:#eee;
  padding:4px 14px;
  border-top:1px solid rgba(0,0,0,0);
  border-left:1px solid red;
}
.footerLinks li:hover{
  color: red;
  border-top:1px solid #fff;  
}
.footerLinks .show:first-child {
  border-left:none;
}

<nav role='navigation'>
  <ul class="footerLinks">
    <li class="show first"><a href="#">Home</a></li>
    <li class="show"><a href="#">About</a></li>
    <li class="show"><a href="#">Clients</a></li>
    <li class="show"><a href="#">Contact Us</a></li>
  </ul>
</nav>

first-child was not workded in css

4 Answers4