Как настроить nth-last-child?

Question

[ayapergenov]

Посредством псевдокласса :after создается нижний бордер у блока .col-md-4
Таких блоков всего 6. Необходимо отменить действие псевдокласса after у последних 3, 2 и 1 блока в зависимости от ширины экрана. Чтобы бордер был у всех кроме нижних блоков.
На скриншоте псевдокласс nth-last-child применяется как к блоку .col-md-4 так и псевдоклассу after.
Выложил код для наглядности и удобства сюда:
jsfiddle.net/mathetes/909bg19o

Решение такое .col-md-4:nth-last-child(-n+3):after

Comments

[Владик Лимонадик]

Для начала установите подсветку синтаксиса LESS в саблайме своем :-]

Answer 1

[tennalian]

:nth-last-child(1)
:nth-last-child(2)
:nth-last-child(3)
не?

Comments

[ayapergenov]

Пробовал всяко. Но бордер не отключается

[tennalian]

ayapergenov: В принципе, нижний комментатор прав. Попробуйте всем блокам добавить класс item и от него отталкиваться. Возможно, стоит использовать nth-last-of-type(n), вместо обычного чайлда.

[tennalian]

ayapergenov: и, кстати, у вас неверный код. background-color применяется не к after элементу, а к блоку .col-md-4

[ayapergenov]

jsfiddle.net/mathetes/909bg19o Посмотрите здесь

[tennalian]

ayapergenov: .col-md-4:nth-last-child(-n+3):after

[ayapergenov]

tennalian: Спасибо, дружище! А ларчик просто открывался... Сколько времени мучился.

[tennalian]

ayapergenov: да не за что) вообще, nth-child мутная штука) вот, для примерчика)) jsfiddle.net/tennalian/1yr581k7

Answer 2

[Viktor Vsk]

Для начала, оформлять код как код.
После - настроить использование jsfiddle.

Comments

[Владик Лимонадик]

ЛЮТО ПЛЮСУЮ, БРАТ!

[ayapergenov]

Не понял. Нужно выложить код а не скриншот?

[Viktor Vsk]

ayapergenov: нужно скинуть ссылку на прототип. например, здесь: jsfiddle.net

[Viktor Vsk]

ayapergenov: задавай вопрос, какой вариант вы представляли:
1) Люди в мозгу пишут разметку под ваш код и компилируют в головое css
2) Люди отркывают два окна по 50% ширины и старательно переписывают ваш код, после чего, готовят под него разметку и запускают на хостинге, что бы посмотреть результат
?

[ayapergenov]

Простите меня неграмотного. Буду исправляться.

[ayapergenov]

knitevision1: jsfiddle.net/mathetes/909bg19o Пожалуйста, только не лютуйте

[ayapergenov]

Виктор Выскребенцев: jsfiddle.net/mathetes/909bg19o Вот как то так

[zooks]

По-моему, здесь народ не догадывается о существовании подобных сервисов и редко использует их даже в ответах.

[ayapergenov]

Ох и прав же ты zooks. Хотя я пользовался jsfiddle но не догнал, что можно шарить свой код так удобно.

Answer 3

[Владик Лимонадик]

Можно навесить класс, типа "block-fix" и в .block-fix {} выставить все нужные стили и для :after, и для :before, и для всего.

Я так и не понял, бордер вам не нужен, или бэграунд.

Comments

[ayapergenov]

Нужен нижний бордер в 1px

[Владик Лимонадик]

Ну, пишите block-fix &:after border 1px solid #lol и вперед

[ayapergenov]

Зачем мне создавать еще один класс когда есть класс col-md-4 к нему и применяются after классы after и nth-last-child. After срабатывает и делает бордер. А nth-last-child нет. В том и вопрос, почему?

[Владик Лимонадик]

ayapergenov: эм. Ну удачи короче :-]

[Владик Лимонадик]

у вас в проекте только в одном месте используется кол-мд-4? и вы вот так вот легко вешаете на него :after еффект :) лол. ну представьте себе 40-ка страничный проект. гыгыгыг. а вы спрашиваете, почему через nth распостраняется ваш афтер псевдокласс. гыгы

Answer 4

[Oogway]

Как то странно вы делаете, из того что видно на скриншоте. Зачем вешать стили оформления на бутстраповский грид? Боюсь представить где еще может появиться этот бордер, и в зависимости от ширины экрана наверняка сменятся классы

Comments

[ayapergenov]

Думаю применить подобные стили и для классов с другим размером экрана. Код выложил чтобы вам было более понятно.
jsfiddle.net/mathetes/909bg19o

[Oogway]

Эти классы используются для создания лэйаута, пропишите отдельный класс для оформления