Как по-разному стилизовать каждый последний элемент каждой строки / строки?

0

Я пытаюсь создать сетку, используя

display:inline=block

Мне нужно стилизовать каждый последний элемент каждой строки/строки по-разному. Я пытался

nth-child
nth-of-type

Однако, когда я использую это, он смешивается с моими другими сетками. Итак, как мне это сделать без добавления новых классов?

Изменить 1: http://jsfiddle.net/#&togetherjs=kfTw3ULKmE

Изменить 2: Я решил, что встроенные блоки были слишком сложными, поэтому я переключился на float. Моя сетка работает сейчас!

  • 3
    Нам нужно увидеть ваш конкретный HTML / CSS, в идеале, в JFiddle, чтобы комментировать. :last-child , вероятно, поможет купить его, может не сработать в ваших обстоятельствах
  • 0
    @Paulie_D michellecantin.ca/test/features/grids Это мой документ
Показать ещё 3 комментария
Теги:

2 ответа

4

Насколько я видел из вашего кода, вы не можете использовать nth-child для достижения своей цели. Я попытаюсь объяснить с помощью примера: вы хотите, чтобы 4-й и 8-й дочерние части класса = "четыре" были окрашены в красный цвет. Чтобы использовать nth-child или nth-of-type, вы должны ссылаться на детей, начиная с их родителя, т.е. Тела. Поэтому трудно сказать, какое число в списке детей тела составляют 4-й и 8-й дети секции класса = "четыре", и это совсем не гибко. Я думаю, вы используете его неправильно, что-то вроде section.four: last-child, что неверно. Проверьте: w3schools link

Кроме того, nth-child и nth-of-type нельзя использовать с селектором, но только с элементом, поэтому не нужно делать что-то вроде.four: nth-child (в случае, если вы делаете div с классом = "четыре" вне ваших разделов).

Таким образом, единственный способ, не добавляя больше классов, - это jquery, например:

$('.four').last().css('background-color', 'red');
Поделиться
  • 0
    Хотя я согласен и проголосовал, возможно, стоит использовать альтернативные ссылки (здесь W3Schools не имеет хорошей репутации), такие как :nth-child() на W3.org или :nth-child() на MDN ,
  • 1
    Спасибо, буду иметь ввиду :)
Показать ещё 2 комментария
0

В CSS3, если вы связываете каждый nth-child с классом какого-либо типа, а каждый n-й тип с другим классом может по-разному стилизовать каждый. Например,

<html>
<div class="nth-child"> 
   //some code
</div>

<div class="nth-of-type">
 //some code
</div>

</html>

Затем в вашем файле CSS вы сделаете что-то похожее на это:

.nth-child
{
  //style rules
}
.nth-of-type
{
//style rules
}

Надеюсь, это то, что вы искали, без опубликованного примера, как это трудно понять, что вы точно имеете в виду. Но если вы хотите, чтобы мы JS для этого, вы создали бы JS-функцию для получения всех элементов на вашей странице, используя "var elements= document.getElementsByClassName("nth-child")" Вы пропустили бы через" elements.length "каждый стиль элемента "none"

Поделиться
  • 0
    «В CSS3» вы должны использовать псевдоклассы :nth-child() и :nth-of-type() соответственно ... что и подразумевается в этом вопросе.
  • 0
    @ user2917241 Я не совсем понимаю, что ты пытаешься сказать. Вы используете nth-of-type и nth-child в качестве классов. Я не хочу добавлять больше классов.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню