Was ist ein CSS-Selektor?

CSS-Selektoren sind Teil einer CSS-Regel, mit der Sie den Inhalt auswählen können, den Sie formatieren möchten. In diesem Artikel werden wir uns die folgenden Arten von Selektoren ansehen und sehen, wie wir sie verwenden können.

• Grundlegende Selektoren
• Erweiterte Selektoren
• Kombinierer

Grundlegende Auswahltypen

• Geben Sie Selektoren ein
• Klassenselektoren
• Identifikator-Selektoren
• Universalwähler

Geben Sie Selektoren ein

Typselektoren entsprechen jeder Instanz des Elementtyps (Header, p, span, div usw.) im Dokumentbaum.

Die folgende Regel zielt auf alle H1-Elemente im Dokumentbaum ab:

h1 {
    font-size: 26px;
}

Klassenselektoren

Klassenselektoren sind mit a gekennzeichnet. (Punkt) vor dem Klassennamen bei Verwendung in einem Selektor. Angenommen, wir haben ein HTML-Dokument, das den folgenden Codeausschnitt enthält:

 class="quote">The only thing we have to fear is fear itself

 class="author">Franklin D. Roosevelt

Wir können den CSS-Klassenselektor verwenden, um auf die Klassen .quote und .author abzuzielen und den Elementen die gewünschten Stile zu geben:

.quote {
    font-style: italics;
}

ID-Selektoren

Im Gegensatz zu Klassenselektoren verwenden ID-Selektoren einen Hash (#), wenn sie in einem Selektor verwendet werden.

 id="main-title">Cascading Style Sheets

Universelle Selektoren

Universelle Selektoren wählen alle Elemente eines Tags aus. Im folgenden Beispiel wird jedes Element ausgewählt, das sich in einem div befindet.

div * {
    color: gray;
    font-size: 14px;
}

Arten von erweiterten Selektoren

• Pseudoelemente
• Pseudoklassen
• Attributselektoren

Pseudoelemente

Pseudoelemente ermöglichen die Formatierung basierend auf Informationen außerhalb des Dokumentbaums. In CSS3 werden Pseudoelemente durch einen Doppelpunkt bezeichnet, um den Unterschied zwischen Pseudoelementen und Pseudoklassen zu kennzeichnen. Verwenden Sie für die Unterstützung von Internet Explorer 8 und früheren Versionen einen einzelnen Doppelpunkt. Insgesamt gibt es derzeit fünf Pseudoelemente:

• ::nach
• ::Vor
• ::Erster Brief
• ::Erste Linie
• ::Auswahl

A :: after kann für viele Dinge verwendet werden, einschließlich des Hinzufügens von Anführungszeichen zu allen q-Elementen. Zum Beispiel:

q::before {
    content: open-quote;
}

Alternativ kann ein :: before / :: after auch zum Einfügen von Inhalten wie dem folgenden verwendet werden:

p::after {
    content: "The End";
    display: block;
    text-align: center;
}

Pseudoklassen

Selektoren werden Pseudoklassen hinzugefügt, um einen bestimmten Status eines Elements anzugeben. Die vollständige Liste der Pseudoklassen enthält:

• :Pfandrecht
• :hat besucht
• :aktiv
• :flotter
• :Fokus
• :leer
• :Ziel
• : geprüft
• : aktiviert
• : behindert
• : erster Typ
• : letzter Typ
• : erstes Kind
• : letztes Kind
• : n-tes Kind
• : n-tes letztes Kind
• : n-ter Typ

Angenommen, wir möchten, dass unsere Links für besuchte Links dunkelblau, schwebend lila und rot sind. Wir können dies mit dem folgenden Code erreichen.

a:link {
    color: darkblue;
}

Wenn wir alternativ die Linkfarbe für alle Links mit einer externen Klasse überschreiben möchten, können wir Folgendes tun:

.external:link {
    color: lightblue;
}

Attributselektoren

Attributselektoren werden verwendet, um Elemente basierend auf dem Vorhandensein und / oder dem Wert von HTML-Attributen, die dem Element zugeordnet sind, als Ziel festzulegen. Diese Selektoren sind in eckigen Klammern angegeben.

Lassen Sie uns am Beispiel eines Links die sieben Möglichkeiten behandeln, wie wir den Link basierend auf dem Attribut eines Ankerelements ausrichten können.

ein[href]Stellt einen Anker mit einem href dar.
ein[href=”http://www.volusion.com/”]Stellt einen Anker mit dem Attribut href und einem Wert von genau http://www.volusion.com/ dar. Beachten Sie, dass hier zwischen Groß- und Kleinschreibung unterschieden wird.
ein[title~=”Moyens I/O”]Stellt einen Anker mit einem Titel dar, dessen Wert eine Liste von Wörtern ist, die durch Leerzeichen getrennt sind. Eines davon ist der Wert bedeutet E / A.
ein[title|=”foo”]Genau wie der Operator ~ =, der | = stellt einen Anker mit einem Titel dar, dessen Werte Listen sind, die durch Bindestriche getrennt sind, die den Wert von foo enthalten.
ein[href^=”http”]Repräsentiert alle Anker mit einem href-Attribut, das mit http beginnt.
ein[href$=”.com”]Stellt alle Anker mit einem href-Attribut dar, das auf .com endet.
ein[href*=”volusion”]Stellt alle Anker mit dem Attribut href dar, das das Wort volusion enthält.

Kombinierer

In besonderen Fällen, in denen wir Elemente aufgrund ihrer Beziehung zu anderen Elementen als Ziel festlegen möchten, möchten wir Kombinierer verwenden. Kombinatoren sind menschlichen Beziehungen insofern sehr ähnlich, als CSS wie menschliche Familien Nachkommen, Kinder, Eltern und Geschwister hat. Wir werden jeden der vier Kombinatortypen im Detail behandeln.

• Nachkommen Selektor
• Kinderauswahl
• Angrenzender Geschwisterwähler
• Allgemeine Geschwisterauswahl

Absteigende Selektoren

Ein Nachkommen-Selektor kann auf alle Elemente abzielen, die Nachkommen eines angegebenen Elements sind. Alle Elemente auswählen

die sind in einem

div p {
    font-size: 14px;
}

    Link 
    

        Link 
    

p {
    color: black;
}

Title
This is a paragraph. 
This is a paragraph. 
This is a paragraph. 
This is a paragraph. 

p {
    color: black;
}

Title
This is a paragraph. 
This is a paragraph. 
This is a paragraph. 

    
This is a paragraph.