Как отменить подчеркивание у последнего элемента?

Question

[Norum]

Как убрать пунктир у последнего элемента через nth-child или type?

<div class="item">
														<img src="img/paint.jpg" alt="paint">
														<div class="col">
															<div class="description">
																<span class="desc-paint">Краска Murales, 42-3, 6 кг.</span>
																<span class="article">артикул: cx133</span>
															</div>
															
															<div class="price">
																<span class="cross_price">1280.00 р .</span>
																<span class="actual_price">960.<span class="zero">00</span> р.</span>
															</div>

															<a href="#" class="buy">Купить</a>	

														</div>
														
															<ul class="item-footer">
																<li><a href="#"><img src="img/icons/scale.svg" alt=""><span>Сравнить</span></a></li>
																<li><a href="#"><img src="img/icons/heart-mini.svg" alt=""><span>В избранное</span></a></li>
																<li><a href="#"><img src="img/icons/conversation.svg" alt=""><span>8</span></a></li>

															</ul>
														
														
</div>

Answer 1

[Ankhena]

Лучше всего - задать класс.
Если религия не позволяет этого сделать, то не отменять подчеркивание, а задавать только нужным.
Т.е. всем ссылкам, кроме тех, что лежат в последнем li.

.item-footer li:not(:last-child) a {этим задать подчеркивание}

P.S. Картинки внутри этих ссылок не являются контентными, им нужно либо задавать aria-hidden либо делать их фоном/псевдоэлеменом. Тогда у каждого li или ссылки будет свой класс (а это отлично) и вообще не будет проблемы с nth-child.
Span вообще лишний, зачем он вам?

Comments

[Norum]

то есть правильно будет задать каждому li класс, потом перед каждым сделать :before и добавить картинку через background? Ну и удалить span-ы

[Ankhena]

Norum, или для li или для a - по 2 класса.
Например
a class="footer__link footer__link--compare"
в .footer__link одинаковые для всех ссылок свойства
в .footer__link--compare - уникальные

Черточки это по БЭМу, если его не используете, можете писать просто "footer-link-compare footer-link-compare"

[Norum]

я сделал так
https://jsfiddle.net/1ek4q8gv/

[Norum]

объясните поподробнее, почему картинки внутри ссылок не являются контентными?

[Ankhena]

Norum,

я сделал так

Если нравится менять 3 раза одно и то же свойство, то почему бы и нет.
Завязывать на порядок следования то, что от него не зависит не лучшая практика. Если вы захотите поставить этот элемент в центр, он ведь не перестанет быть не подчеркнутым. Т.е. он не подчеркивается не потому что он последний, а потому что там только цифры.

объясните поподробнее, почему картинки внутри ссылок не являются контентными?

А какой alt вы им пропишете?
Потом представьте, что вы гуглите по картинкам по тексту из alt.
И найдется ваш сайт. Этот сайт даст ответ на запрос из поиска - нет.
Это один вариант размышлений.
Другой - если отвалятся стили и этой картинки не будет, смысл потеряется? Нет. Но должен остаться текст.

Для ссылок, кнопок и т.д., если в их оформлении есть только картинка, то для доступности в неё добавляют спан с классом visually-hidden (легко гуглится по "доступное скрытие visually-hidden", что в него пишут). Саму картинку ставят фоном/псевдоэлементом.

<a href="vk"><span class="visually-hidden">наша группа в VK</span></a>

Или используют атрибут aria-label.
Любой из этих вариантов подходит для вашей ссылки. Второй подходит для читалок, первый - универсальный, сработает и для читалок и на случай если пропадут стили.

Answer 2

[T3R3AND]

:last-child

Answer 3

[Ваня Гурьянов]

.item-footer a:last-child {border: none} или {text-decoration: none};

Comments

[Ankhena]

Не прокатит