css first child doesn't work on my

Question

CSS

.list-group-item:first-child{
  border-top: none !important;
}

HTML

<li class="list-group-item" ng-repeat="user in data">
 {{user.name}}
</li>

What's wrong with my first-child?

demo here http://plnkr.co/edit/FKXdsJRc9eu4TiN9UPMY?p=preview

See [(this)](http://stackoverflow.com/a/8539107/1355315) and [(this)](http://stackoverflow.com/a/5546296/1355315) for more info — Abhitalks, Jun 27 '14 at 10:29
@abhitalks well in OP example, the first li has that class so it should work. — web-tiki, Jun 27 '14 at 10:30

score 1 · Answer 1 · answered Jun 27 '14 at 10:11

The :first-child selector is intended, to select the first child of a parent tag. The children have to be embedded in the same parent tag, it is not to be used with css class.

If you want to select first list item, you chould modify it to select first child of <ul> tag.

li:first-child{
  border-top: none !important;
}

score 0 · Answer 2 · answered Jun 27 '14 at 10:09

0

Embed the list in <ul></ul> tags, as they are expected to, and it will work.

answered Jun 27 '14 at 10:09

sk904861

1,247
1
14
31

score 0 · Answer 3 · answered Jun 27 '14 at 10:11

Remove !important from list-group-item class border-top

CSS:

.list-group-item {
padding: 6px 15px !important;
border-top: 2px solid #DDD;
padding-top: 15px !important;
}

HTML:

something here

<ul>
    <li class="list-group-item ng-scope ng-binding" ng-repeat="user in data">jason</li>
    <li class="list-group-item ng-scope ng-binding" ng-repeat="user in data">james</li>
    <li class="list-group-item ng-scope ng-binding" ng-repeat="user in data">josh</li>
    <li class="list-group-item ng-scope ng-binding" ng-repeat="user in data">joshua</li>
</ul>

LINK

score 0 · Accepted Answer · answered Jun 27 '14 at 10:12

You could change it in two ways:

A) Use it on the li (as now) but use first-of-type

B) Nest the li's in an ul class="example" (which you are supposed to do) and do

.example:first-child{
    border-top: none !important;
}

(Your example edited: http://plnkr.co/edit/QTlaDQPXfdg3W6oNYex4?p=preview)

score 0 · Answer 5 · answered Jun 27 '14 at 10:12

0

You can try below code:

http://plnkr.co/edit/jqecyBMcrLfVaGtxhIaM?p=preview

 <ul><li class="list-group-item" ng-repeat="user in data">
{{user.name}}
</li></ul>

answered Jun 27 '14 at 10:12

Pradeep Pansari

1,287
6
10

score 0 · Answer 6 · answered Jun 27 '14 at 10:13

You don't have any parent tag there. You should use something like this:

HTML

<ul class="list-group-item">
  <li ng-repeat="user in data">
    {{user.name}}
  </li>
</ul>

CSS

.list-group-item li {
  padding: 6px 15px !important;
  border-top: 2px solid #DDD !important;
  padding-top: 15px !important;
}

.list-group-item li:first-child {
  border-top: none !important;
}

score 0 · Answer 7 · answered Jun 27 '14 at 10:18

0

<ul class="First"> <li></li> <li></li> <li></li> <li></li> </ul>

If you have this kind of structure you can access the first child by giving style like this :

.First li:first-child {

/your style comes here/

}

answered Jun 27 '14 at 10:18

Suyesh Tiwari

93
1
6

score 0 · Answer 8 · edited Jun 27 '14 at 11:09

0

I have tried to solve the answer in different way, Not Sure why first:child is not working

.list-group-item {
  padding: 6px 15px;
  border-bottom: 2px solid #DDD;
  padding-top: 15px;
}

.list-group-item:last-child{
  border-bottom: 2px solid #FFFFFF;
}

edited Jun 27 '14 at 11:09

msturdy

10,479
11
41
52

answered Jun 27 '14 at 10:24

user3363737

21
3

css first child doesn't work on my

8 Answers8