Використовуючи регулярний вираз у css?

У мене є html-сторінка з divs, які мають ідентифікатори форм s1 , s2 тощо.

<div id="sections">
   <div id="s1">...</div>
   <div id="s2">...</div>
   ...
</div>

Я хочу застосувати властивість css до підмножини цих розділів / divs (залежно від ідентифікатора). Однак кожного разу, коли я додаю div , я повинен додавати css для розділу окремо, як це.

//css
#s1{
...
}

Чи є щось на зразок регулярних виразів у css, які я можу використовувати, щоб застосувати стиль до набору divs .

Ви можете керувати вибором цих елементів без будь-якої форми регулярного вираження, як показано в попередніх відповідях, але, щоб відповісти на питання безпосередньо, так, ви можете використовувати форму регулярного вираження в селекторах:

#sections div[id^='s'] {
    color: red;  
}

Це говорить про те, що виберіть будь-які елементи div всередині div #sections, які мають ідентифікатор, починаючи з літери 's'.

Дивіться скрипку тут .

Тут вибираються W3 CSS-селектори .

Як доповнення до цієї відповіді ви можете використовувати $для отримання кінцевих збігів та *отримання збігів будь-де в назві значення.

Матчі в будь-якому місці: .col-md, .left-col, .col, .tricolorі т.д.

[class*="col"]

Матчі на початку: .col-md, .col-sm-6і т.д.

[class^="col-"]

Матчі в фіналі: .left-col, .right-colі т.д.

[class$="-col"]

Ідентифікатор призначений для унікального ідентифікації елемента . Будь-які стилі, застосовані до нього, також повинні бути унікальними для цього елемента. Якщо у вас є стилі, які ви хочете застосувати до багатьох елементів, вам слід додати клас до них усіх, а не покладатися на селектори ID ...

<div id="sections">
   <div id="s1" class="sec">...</div>
   <div id="s2" class="sec">...</div>
   ...
</div>

і

.sec {
    ...
}

Або у вашому конкретному випадку ви можете вибрати всі підрозділи всередині вашого батьківського контейнера, якщо нічого іншого немає всередині нього, наприклад:

#sections > div {
    ...
}

Перш за все, існує багато, багато способів узгодження елементів у документі HTML. Почніть з цього посилання, щоб побачити деякі доступні селектори / візерунки, які можна використовувати для застосування правила стилю до елементів (ив).

http://www.w3.org/TR/selectors/

Відповідайте всім div, які є прямими нащадками #main.

#main > div

Відповідайте всім div, які є прямими або непрямими нащадками #main.

#main div

Зрівняйтеся з першим, divякий є прямим нащадком #sections.

#main > div:first-child

Зіставте а divз атрибутом.

#main > div[foo="bar"]

Ви можете просто додати клас до кожного свого DIV і застосувати правило до класу таким чином:

HTML:

<div class="myclass" id="s1">...</div>
<div class="myclass" id="s2">...</div>

CSS:

//css
.myclass
{
   ...
}

Зазвичай я використовую, *коли хочу отримати всі рядки, що містять шукані символи.

* використовується в регулярному вираженні, замінює всі символи.

Використовуваний в SASS або CSS буде щось подібне, [id*="s"]і він отримає всі елементи DOM з ідентифікатором "s ......".

/* add red color to all div with id s .... elements */

div[id^="s"] {
    color: red;
}

Спробуйте моє загальне CSS регулярне вираження

(([a-z]{5,6}.*?\))|([\d.+-]?)(?![a-z\s#.()%])(\d?\.?\d?)?[a-z\d%]+)|(url\([/"'][a-z:/.]*['")]\))|(rgb|hsl)a?\(\d+%?,?\s?\d+%?,?\s?\d+%?(,\s?\d+\.?\d?)?\)|(#(\w|[\d]){3,8})|([\w]{3,8}(?=.*-))

Демонстрація https://regexr.com/4a22i

Є ще один простий спосіб вибору конкретних елементів у css теж ...

#s1, #s2, #s3 {
    // set css attributes here
}

якщо у вас є лише кілька елементів на вибір, і ви не хочете турбуватися з класами, це теж спрацює легко.