<div class="katalog"> <p>Каталог</p> <ul> <?php foreach($products as $product): ?> <a href="#"><li><?=$product['name']?></li></a> <?php endforeach;?> </ul> </div> <!-- /katalog -->

For each element li, the upper and lower boarders are specified, but the first and the last one must remove the upper and lower border respectively. Through: last-child and: first-child it does not work for some reason. Help who can! Thanks in advance!

  • css code add - EatMyDust
  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

1 answer 1

Since there are no details and no sample code, I will assume that the problem is an invalid layout: ul must contain li as children, and you have a there. Therefore :last-child and :first-child are applied to each li - they have no “brothers” at the same nesting level, and therefore each element of the list is both the last and the first.

You can replace with the correct structure if it suits you:

 <div class="сatalog"> <p>Каталог</p> <ul> <?php foreach($products as $product): ?> <li><a href="#"><?=$product['name']?></a></li> <?php endforeach;?> </ul> </div>

Or change the selector and select the elements a:last-child , a:first-child since they are children of ul and are on the same nesting level. But keep in mind that links can be somewhere else, because the selector must be somehow specified (add a new id or class , for example, for ul ):

HTML:

 <ul class="list"> ... </ul>

CSS:

 ul.list a:first-child
  • And if you do as you advised, is it possible to do something like that, so that the link would be pressed in all <li>, and not just when you click on the word ....? - Oleg Melnik
  • @Oleg Melnik For the style of the link, you can try adding a display:block; - Gino Pane