JavaScript & jQuery

CSS4 bereits heute nutzen: Elternelemente ansprechen mit cssParentSelector.js

31. Januar 2013
von

Mit CSS ist es einfach, Kind- und Geschwisterelemente anzusprechen. Elternelemente anzusprechen ist – zumindest bisher – mit CSS nicht möglich. Für CSS4 ist diese Option zwar vorgesehen, allerdings dürfte es noch eine Weile dauern, bis die ersten Browser CSS4 im Ansatz interpretieren können. Mit dem jQuery-Plugin cssParentSelector nutzen Sie aber bereits jetzt diese Möglichkeit.


cssParentSelector-Plugin

Back to the Future: Plugin ermöglicht Verwendung des Parent-Selektors aus CSS4 heute

Zu den Neuerungen, mit denen CSS4 aufwarten wird, gehören unter anderem einige neue Selektoren. Einer davon ist der Parent-Selektor, der es endlich ermöglicht, auf Elternelemente zuzugreifen. Die Syntax sieht so aus:

1
2
3
p! > input {
  color: red;
}

Im Beispiel wird der Inhalt des P-Elementes rot gefärbt, falls es Elternelement eines INPUT-Elementes ist. Da bisher kein Browser etwas mit dieser Auszeichnung anfangen kann, müsste man heutzutage auf diese Auszeichnung verzichten. Wer das nicht möchte, der verwendet das cssParentSelector-Plugin für jQuery.

Um das Plugin nutzen zu können, genügt es, die JavaScript-Datei zusammen mit jQuery im Kopf eines HTML-Dokumentes einzubinden. Das Plugin sorgt dafür, dass der Browser dieses CSS4-Feature bereits jetzt umsetzt.

Sie können den neuen Selektor – wie Sie es von anderen Selektoren gewohnt sind – auf Klassen und IDs anwenden. Auch in Kombination mit dem Universal-Selektor funktioniert er:

1
2
3
*! > p {
  background: green;
}

Das Beispiel färbt den Hintergrund jedes Elternelementes eines P-Elementes grün ein.

Statt das Elternelement direkt anzusprechen besteht auch die Möglichkeit, ein spezielles Zielelement, welches Kind des Elternelementes ist, anzusprechen:

1
2
3
!p label > input {
  color: blue;
}

In diesem Beispiel wirkt sich die CSS-Eigenschaft color auf alle LABEL-Elemente aus, die Kind des P-Elementes sind, falls das P-Element Elternelement eines INPUT-Elementes ist.

Fazit: Das neue Parent-Element dürfte viele Webentwickler glücklich machen. Bis es als reines CSS eingesetzt werden kann, hilft  das cssParentSelector-Plugin.

(dpe)

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Tags: , ,

4 Kommentare zu „CSS4 bereits heute nutzen: Elternelemente ansprechen mit cssParentSelector.js
  1. […] (via Dr. Web) […]

  2. Gunnar Bittersmann am 1. Februar 2013 um 22:07

    Es gibt kein CSS4. http://www.xanthir.com/b4Ko0

    • Dieter Petereit am 1. Februar 2013 um 22:25

      Ist klar. Bielefeld gibt es ja auch nicht…

    • Wolf am 1. Juni 2014 um 11:32

      Nein, CSS wurd sich NIE mehr weiterentwickeln.. sicher, genau so wie es nie PHP 7 geben wird…

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!