CODEWITHSUNDEEP
phplaravelcss
DolDurma
DolDurma

Reputation: 17340

Css :last-child using on Laravel @foreach

On Laravel blade I'm using this code to iterate through a list which is filled by an array:

<ul>
    @foreach($prerequisites as $prerequisite)
        <li class="pre-course"
            style="border-bottom: 1px solid #eee;">
            <p>
                ...
            </p>
        </li>
    @endforeach
</ul>

on this my code each <li> have border-bottom: 1px solid #eee; and i'm trying to remove that on last child with Css by code:

ul li.pre-course:last-child {
  border-bottom:none;
}

but it doesn't work and last child have border

Upvotes: 0

Views: 479

Answers (3)

Johannes
Johannes

Reputation: 67778

I suppose that's due to the inline style overriding the stylesheet CSS. Try to move the "regular" rule from inline to the stylesheet, like this:

<ul>
    @foreach($prerequisites as $prerequisite)
        <li class="pre-course">
            <p>
                ...
            </p>
        </li>
    @endforeach
</ul>

and CSS:

ul li.pre-course {
  border-bottom: 1px solid #eee;
}
ul li.pre-course:last-child {
  border-bottom:none;
}

That way :last-child will overwrite the regular CSS rule

Upvotes: 2

Niklesh Raut
Niklesh Raut

Reputation: 34914

Priority of in-line css is higher 

    <li class="pre-course">
        <p>
            ...
        </p>
    </li>

Try this css

 ul li.pre-course:not(:last-child) {
     border-bottom: 1px solid #eee;
 }

Upvotes: 1

jvk
jvk

Reputation: 2211

ul li:last-child {
  border-bottom:none !important;
}

Upvotes: 1

Related Questions