Hier im Forum bekommt ihr bei euren fragen schnelle hilfe.Hier geht es rund um das Web SeitenProgrammieren.Alles rund ums Javascript,Html,Php,Css und Sql.Auf fast allen Fragen haben wir eine Antwort.
Der Soforthilfe-chat verspricht das ,was sein Name sagt. Hier sind Leute Online die sofort ihre hilfe anbieten.Seht in der OnlineListe nach und wenn einer Online ist werdet ihr auch antwort bekommen. Admine ,Moderatoren und Helfer sind unsere Spezialisten in Sachen Web Programierung
71 Unwetterwarnungen in Deutschland
Die Datenbank wurde zuletzt am 02.08.2020 17:34:28 aktualiesiert
71

Nützliche CSS Selektoren die man kaum benutzt

Screenshot CSS Selektoren. Sublime Text 2

Hier möchte ich ein paar nützliche CSS-Selektoren vorstellen die meines Erachtens relativ selten Verwendung finden aber an der einen oder anderen Stelle durchaus sehr nützlich und hilfreich seien können. Einige dieser CSS-Selektoren gibt es dabei schon seit der Version CSS1, es geht hier also nicht um neue Selektoren, sondern einfach nur um einen sinnvollen Einsatz der bisherigen Möglichkeiten.

Attribut-Selektor

Seit CSS2 kann man HTML-Elemente nicht nur über die Klasse oder ID per CSS selektieren, sondern auch über ein Attribut. Hierbei kann man zum einen das Vorkommen eines Attributes als Selektor verwenden, oder auf einen fest definierten Wert oder auch auf eine Zeichenkette als Wert des Attributes eingehen. Der Selektor ist hierbei anders als Klassen- und ID-Selektoren nicht case-sensitiv.

/* Beispiele für den Attribut-Selektor */
 
/* Attribut 'href' ist gesetzt */
a[href] {cursor: pointer;}
 
/* Attribut 'href' beginnt mit der Zeichenkette 'http://' */
a[href^='http://'] {color: red;}
 
/* Attribut 'class' beinhaltet die Zeichenkette 'icon' */
span[class*='icon'] {padding-left: 30px;}
 
/* Attribut 'href' endet mit der Zeichenkette '.jpg' */
a[href$=".jpg"] {color: lime;}

:not(selector)

Der not-Selektor macht eigentlich genau das was der Name schon sagt. Er selektiert das Element, welches nicht dem angegebenen Selektor in den Klammern entspricht.

/* Beispiele für den :not(selector) */
 
/* Attribut gesetzt */
p:not(.error) {color: #333;}

Element + Element

Mit dem + Selektor selektiert man jedes Element welches direkt nach dem zuerst angegebenen Element steht.

/* Beispiele für + Selektor */
 
/* Jeder paragraph der direktes Kind eine DIVs ist */
div + p {color: orange;}

:first-child Selektor

Mit :first-child selektiert man das erste Element seines Eltern-Elements. Dieser Selektor ist beispielsweise sehr nützlich für gestylte Listen, und er wird im Gegensatz zu :last-child auch vom Internet Explorer 7 unterstützt.

/* Beispiele für :first-child Selektor */
 
/* Das erste Listenelement von '.nav' */
.nav li:first-child {border-top: none;}

Add Comment

* Required information
1000
Powered by Commentics

Comments (0)

No comments yet. Be the first!