css first child doesn't work on my <li> [duplicate] - html

Question

This question already has answers here:
CSS selector for first element with class
(23 answers)
Closed 8 years ago.
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

Answer 1

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;
}

Answer 2

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)

Answer 3

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

Answer 4

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

Answer 5

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>

Answer 6

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;
}

Answer 7

<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/
}

Answer 8

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;
}