Używasz wyrażenia regularnego w CSS?


127

Mam stronę HTML z elementami div, które mają identyfikator (y) w postaci s1 , s2 i tak dalej.

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

Chcę zastosować właściwość css do podzbioru tych sekcji / elementów div (w zależności od identyfikatora). Jednak za każdym razem, gdy dodam element div , muszę osobno dodać css dla sekcji, tak jak to.

//css
#s1{
...
}

Czy jest coś takiego jak wyrażenia regularne w css, których mogę użyć do nadania stylu zestawowi elementów div .


9
Prawdopodobnie powinieneś używać classatrybutu do identyfikowania klasy elementów z tymi identyfikatorami
LeeGee,

Odpowiedzi:


191

Możesz zarządzać wybieraniem tych elementów bez jakiejkolwiek formy wyrażenia regularnego, jak pokazują poprzednie odpowiedzi, ale aby odpowiedzieć bezpośrednio na pytanie, tak, możesz użyć formy wyrażenia regularnego w selektorach:

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

Oznacza to, że wybierz wszystkie elementy div wewnątrz elementu div #sections, które mają identyfikator zaczynający się na literę „s”.

Zobacz skrzypce tutaj .

Dokumentacja selektora W3 CSS tutaj .


1
Było to w zaleceniu dla CSS 2.1; jest obsługiwany przez IE 7, Opera 9 itd. Źródło: developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
Mike S

2
właśnie sprawiłeś, że mój dzień stał się lepszy. Chciałem dołączyć zaawansowane selektory css do robota, aby był konfigurowalny przez użytkownika. że ^ = było jak woda na jebanej pustyni.
DGoiko

59

Jako uzupełnienie tej odpowiedzi możesz użyć, $aby uzyskać dopasowania końcowe i *uzyskać dopasowania w dowolnym miejscu w nazwie wartości.

Pasuje wszędzie: .col-md, .left-col, .col, .tricolor, itd.

[class*="col"]

Mecze na początku: .col-md, .col-sm-6, itd.

[class^="col-"]

Mecze na zakończenie: .left-col, .right-col, itd.

[class$="-col"]

(Wiem, że to brzmi szalenie, ale) Czy jest możliwe wykonanie „destrukcji” z każdym dopasowaniem?
Walter

24

Identyfikator służy do jednoznacznej identyfikacji elementu . Wszelkie zastosowane do niego style również powinny być unikalne dla tego elementu. Jeśli masz style, które chcesz zastosować do wielu elementów, powinieneś dodać do nich klasę, zamiast polegać na selektorach ID ...

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

i

.sec {
    ...
}

Lub w twoim konkretnym przypadku możesz wybrać wszystkie podziały w kontenerze nadrzędnym, jeśli nic innego nie jest w nim, na przykład:

#sections > div {
    ...
}

10

Przede wszystkim istnieje wiele, wiele sposobów dopasowywania elementów w dokumencie HTML. Zacznij od tego odniesienia, aby zobaczyć niektóre z dostępnych selektorów / wzorców, których możesz użyć do zastosowania reguły stylu do elementu (elementów).

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

Dopasuj wszystkie elementy, divktóre są bezpośrednimi potomkami #main.

#main > div

Dopasuj wszystkie divs, które są bezpośrednimi lub pośrednimi potomkami #main.

#main div

Dopasuj pierwszy, divktóry jest bezpośrednim potomkiem #sections.

#main > div:first-child

Dopasuj a divz określonym atrybutem.

#main > div[foo="bar"]

5

Możesz po prostu dodać klasę do każdego ze swoich DIV i zastosować regułę do klasy w ten sposób:

HTML:

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

CSS:

//css
.myclass
{
   ...
}

3
Generalnie staram się w ogóle nie zmieniać stylu za pomocą selektorów ID. Poprawia specyfikę, więc trudniej je zastąpić, co zwykle boli bardziej niż pomaga w moim doświadczeniu. Używam id ... tylko nie do stosowania css.
prodigitalson

Mówiłem tylko, że staram się unikać używania selektorów id, ponieważ później, jeśli przejdziesz do zmiany stylu (powiedzmy dla konkretnej strony), w końcu będziesz musiał użyć tego samego selektora + cokolwiek innego, czego możesz użyć, aby uczynić go bardziej specyficzny niż oryginalny selektor. Nieźle, jeśli tylko, .thepage #someidale może być naprawdę długa w zaawansowanym stylu tabeli lub listy. To nie była krytyka twojej odpowiedzi, a raczej ogólna rada rozszerzająca twoją odpowiedź :-)
prodigitalson

0

Zwykle używam, *gdy chcę uzyskać wszystkie ciągi zawierające poszukiwane znaki.

* użyte w wyrażeniu regularnym, zastępuje wszystkie znaki.

Użyty w SASS lub CSS byłby podobny [id*="s"]i dostałby wszystkie elementy DOM z id "s ......".

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

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

-4

Wypróbuj moje ogólne wyrażenie regularne 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}(?=.*-))

Demo https://regexr.com/4a22i


-11

jest też inny prosty sposób na wybranie poszczególnych elementów w css ...

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

jeśli masz tylko kilka elementów do wyboru i nie chcesz zawracać sobie głowy klasami, to też się sprawdzi.


3
@AustinHenley Bcoz to nie jest rozwiązanie. Nie chcę za każdym razem edytować reguł css, jak wspomniałem w pytaniu.
Ankit

To nie zasługuje na złą opinię. Gdybyś wiedział, na przykład, że jest co najwyżej 10 elementów div, możesz wstawić # s1 do # s10 i nie musiałbyś dotykać selektorów. Prawidłowym sposobem na zrobienie tego są klasy, ale to rozwiązanie polega na przyjęciu twoich założeń i próbie rozwiązania.
jcuenod

4
Nie ma znaczenia, czy jest to możliwe obejście tej sytuacji. Ta odpowiedź w ogóle nie odpowiada na pytanie, ponieważ każdy, kto ma najbardziej podstawową wiedzę o CSS, wie, jak używać wielu selektorów lub klas.
Jayant Bhawal
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.