Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 22.04.2021, 16:19   #1
AnGera
Новичок
Джуниор
 
Регистрация: 22.04.2021
Сообщений: 1
По умолчанию Группирование ссылок -с -по

Всем форумчанам привет! Ребята, подскажите плиз, как можно в CSS задать стили большому количеству ссылок, например с 1 по 52, учитывая что классы разные. Есть классы "box-1", "box-2", "box-3" и тд. таких ссылок может быть сотни. Так вот необходимо стилизовать только часть ссылок, с 1 по 52. Прописывать в CSS все ссылки мучение. Можно ли их как-то сгруппировать?
AnGera вне форума Ответить с цитированием
Старый 23.05.2021, 19:25   #2
Максим Матвийчина
 
Регистрация: 20.05.2021
Сообщений: 9
По умолчанию

Цитата:
Сообщение от AnGera Посмотреть сообщение
Всем форумчанам привет! Ребята, подскажите плиз, как можно в CSS задать стили большому количеству ссылок, например с 1 по 52, учитывая что классы разные. Есть классы "box-1", "box-2", "box-3" и тд. таких ссылок может быть сотни. Так вот необходимо стилизовать только часть ссылок, с 1 по 52. Прописывать в CSS все ссылки мучение. Можно ли их как-то сгруппировать?
Можно, - для этого обычно используют JavaScript

Например код:

Код:
<script>
var i;
for (i = 1; i < 53; i++) {
  $('.box-'+i).css('color','red');
}
</script>
Сделает цвет текста красным только для элементов box-1 ... box-52.

...--| Разработка сайтов и мобильных приложений |--...
Максим Матвийчина вне форума Ответить с цитированием
Старый 13.06.2021, 10:30   #3
AndresB
Новичок
Джуниор
 
Регистрация: 13.06.2021
Сообщений: 1
По умолчанию

Цитата:
Сообщение от Максим Матвийчина Посмотреть сообщение
Можно, - для этого обычно используют JavaScript
Например код:
Максим Матвийчина, работает спасибо! долго игрался пока не сообразил что этот код нужно вставить в конце страницы, а не вначале ))))

а как это же самое сделать без использования jquery?
AndresB вне форума Ответить с цитированием
Старый 13.06.2021, 11:24   #4
maks1331
Форумчанин
 
Аватар для maks1331
 
Регистрация: 20.12.2016
Сообщений: 270
По умолчанию

Цитата:
Сообщение от AnGera Посмотреть сообщение
Всем форумчанам привет! Ребята, подскажите плиз, как можно в CSS задать стили большому количеству ссылок, например с 1 по 52, учитывая что классы разные. Есть классы "box-1", "box-2", "box-3" и тд. таких ссылок может быть сотни. Так вот необходимо стилизовать только часть ссылок, с 1 по 52. Прописывать в CSS все ссылки мучение. Можно ли их как-то сгруппировать?
[attribute|="box-"] – атрибут равен box- или начинается с box-, например равен "box-1".

Код:
[class|="box-"]{
    color:red;
}
Цитата:
Сообщение от AndresB Посмотреть сообщение
а как это же самое сделать без использования jquery?
https://learn.javascript.ru/ в добрый путь

Код:
<script>
for (let i = 1; i < 53; i++) {
  document.querySelector(`.box-${i}`).style.color = "red";
}
</script>

Последний раз редактировалось maks1331; 13.06.2021 в 11:31.
maks1331 вне форума Ответить с цитированием
Старый 13.06.2021, 14:32   #5
Максим Матвийчина
 
Регистрация: 20.05.2021
Сообщений: 9
По умолчанию

Цитата:
Сообщение от maks1331 Посмотреть сообщение
[attribute|="box-"] – атрибут равен box- или начинается с box-, например равен "box-1".
Замечательно, не знал о таком способе. А можно-ли обратиться к "box-" с 1 по 52, как спрашивал автор темы, используя для этого один лишь css?
Максим Матвийчина вне форума Ответить с цитированием
Старый 13.06.2021, 15:43   #6
maks1331
Форумчанин
 
Аватар для maks1331
 
Регистрация: 20.12.2016
Сообщений: 270
По умолчанию

Цитата:
Сообщение от Максим Матвийчина Посмотреть сообщение
Замечательно, не знал о таком способе. А можно-ли обратиться к "box-" с 1 по 52, как спрашивал автор темы, используя для этого один лишь css?
Чистый css такое не умеет. Препроцессор SCSS/SASS поддерживает циклы:

Код:
@for $number from 1 through 52 {
  .box-#{$number} { 
    color: red; 
  }
}

Последний раз редактировалось maks1331; 13.06.2021 в 15:53.
maks1331 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Платные снятия ссылок в sape - не сильно напрягаясь пролобировали оплату за снятие ссылок :) Alar Общие вопросы Web 5 25.03.2016 16:23
Группирование в панели задач Endifier Общие вопросы Delphi 27 20.06.2014 16:48
группирование данных в диаграмме в c# pirat2k Помощь студентам 2 17.04.2014 20:05
Группирование ячеек на защищенном листе kostas21 Microsoft Office Excel 3 02.03.2014 23:45
таблицы, группирование столбцов netcher HTML и CSS 1 24.10.2009 17:25