Verwenden Sie reguläre Ausdrücke in CSS?

127

Ich habe eine HTML-Seite mit Divs, die IDs der Form s1 , s2 usw. haben.

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

Ich möchte eine CSS-Eigenschaft auf eine Teilmenge dieser Abschnitte / Divs anwenden (abhängig von der ID). Jedes Mal, wenn ich ein div hinzufüge , muss ich das CSS für den Abschnitt separat wie folgt hinzufügen.

//css
#s1{
...
}

Gibt es so etwas wie reguläre Ausdrücke in css , dass ich Stil auf einen Satz anwenden kann divs .

Ankit
quelle
9
Sie sollten wahrscheinlich das classAttribut verwenden, um die Klasse von Elementen mit diesen IDs zu identifizieren
LeeGee

Antworten:

191

Sie können die Auswahl dieser Elemente ohne jegliche Form von Regex verwalten, wie die vorherigen Antworten zeigen. Um die Frage jedoch direkt zu beantworten, können Sie eine Form von Regex in Selektoren verwenden:

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

Das heißt, wählen Sie alle div-Elemente in den #sections div aus, deren ID mit dem Buchstaben 's' beginnt.

Siehe Geige hier .

W3 CSS Selector-Dokumente hier .

Steveax
quelle
1
Dies war in einer Empfehlung für CSS 2.1; Es wird von IE 7, Opera 9 usw. unterstützt. Quelle: developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
Mike S
2
Du hast gerade meinen Tag gemacht. Ich wollte einige erweiterte CSS-Selektoren in einen Crawler aufnehmen, um ihn vom Benutzer konfigurierbar zu machen. das war wie Wasser in der Wüste.
DGoiko
59

Als Ergänzung zu dieser Antwort können Sie $die Endübereinstimmungen und *Übereinstimmungen an einer beliebigen Stelle im Wertnamen abrufen.

Spiele überall: .col-md, .left-col, .col, .tricolor, usw.

[class*="col"]

Spiele am Anfang: .col-md, .col-sm-6usw.

[class^="col-"]

Spiele am Ende: .left-col, .right-colusw.

[class$="-col"]
uruapanmexicansong
quelle
(Ich weiß, das klingt verrückt, aber) Ist es möglich, mit jedem Match "zu zerstören"?
Walter
24

Eine ID soll das Element eindeutig identifizieren . Alle darauf angewendeten Stile sollten auch für dieses Element eindeutig sein. Wenn Sie Stile haben, die Sie auf viele Elemente anwenden möchten , sollten Sie allen eine Klasse hinzufügen, anstatt sich auf ID-Selektoren zu verlassen ...

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

und

.sec {
    ...
}

In Ihrem speziellen Fall können Sie auch alle Abteilungen in Ihrem übergeordneten Container auswählen, wenn sich nichts anderes darin befindet:

#sections > div {
    ...
}
animuson
quelle
10

Erstens gibt es viele, viele Möglichkeiten, Elemente in einem HTML-Dokument abzugleichen. Beginnen Sie mit dieser Referenz, um einige der verfügbaren Selektoren / Muster anzuzeigen, mit denen Sie eine Stilregel auf ein oder mehrere Elemente anwenden können.

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

Entspricht allen divs, die direkte Nachkommen von sind #main.

#main > div

Entspricht allen divs, die direkte oder indirekte Nachkommen von sind #main.

#main div

Passen Sie die erste an, divdie direkt von ihnen abstammt #sections.

#main > div:first-child

Ordnen Sie a diveinem bestimmten Attribut zu.

#main > div[foo="bar"]
Tim Medora
quelle
5

Sie können einfach jedem Ihrer DIVs eine Klasse hinzufügen und die Regel folgendermaßen auf die Klasse anwenden:

HTML:

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

CSS:

//css
.myclass
{
   ...
}
Aurelio De Rosa
quelle
3
Auch in der Regel versuche ich, Dinge überhaupt nicht mit ID-Selektoren zu stylen. Es optimiert die Spezifität, so dass sie schwerer zu überschreiben sind, was normalerweise mehr schmerzt, als es meiner Erfahrung nach hilft. Ich benutze IDs ... nur nicht zum Anwenden von CSS.
prodigitalson
Ich habe nur gesagt, dass ich versuche, die Verwendung von ID-Selektoren zu vermeiden, denn wenn Sie den Stil später überschreiben (sagen wir für eine bestimmte Seite), müssen Sie am Ende denselben Selektor + alles verwenden, was Sie sonst noch verwenden können, um ihn zu verbessern spezifisch als der ursprüngliche Selektor. Nicht schlecht, wenn es nur, .thepage #someidaber es kann auf fortgeschrittenem Tisch- oder Listen-Styling sehr langwierig werden. Es war weniger eine Kritik an Ihrer Antwort als vielmehr ein allgemeiner Ratschlag, der Ihre Antwort erweitert :-)
prodigitalson
0

Ich benutze normalerweise, *wenn ich alle Zeichenfolgen erhalten möchte, die die gewünschten Zeichen enthalten.

* Wird in Regex verwendet und ersetzt alle Zeichen.

In SASS oder CSS verwendet würde so etwas wie [id*="s"]und es wird alle DOM-Elemente mit ID "s ......" erhalten.

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

div[id^="s"] {
    color: red;
}
Niko9
quelle
-4

Versuchen Sie meinen generischen regulären CSS-Ausdruck

(([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

Max Halochkin
quelle
-11

Es gibt noch eine andere einfache Möglichkeit, bestimmte Elemente in CSS auszuwählen ...

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

Wenn Sie nur ein paar Elemente zur Auswahl haben und sich nicht mit Klassen beschäftigen möchten, funktioniert dies auch problemlos.

Sandeep S.
quelle
3
@AustinHenley Bcoz das ist nicht die Lösung. Ich möchte CSS-Regeln nicht jedes Mal bearbeiten, wie ich in der Frage erwähnt habe.
Ankit
Dies verdient keine Ablehnung. Wenn Sie zum Beispiel wüssten, dass es höchstens 10 Divs gibt, könnten Sie # s1 bis # s10 setzen und müssten die Selektoren nicht berühren. Der richtige Weg, dies zu tun, ist mit Klassen, aber diese Lösung nimmt Ihre Annahmen und versucht eine Lösung.
Jcuenod
4
Es spielt keine Rolle, ob dies eine mögliche Problemumgehung für diese gegebene Situation ist. Diese Antwort beantwortet die Frage überhaupt nicht, da jeder mit den grundlegendsten CSS-Kenntnissen weiß, wie man mehrere Selektoren oder Klassen verwendet.
Jayant Bhawal