, Chrome-Entwicklertools: HTML-Elemente per CSS-Selektor finden

Chrome-Entwicklertools: HTML-Elemente per CSS-Selektor finden

In Google Chrome helfen die Entwicklertools beim Entwickeln von Webseiten wirklich weiter. Um bestimmte Elemente zu finden, können Sie nach ihnen suchen. Aber wussten Sie schon, dass Sie dazu auch CSS-Selektoren nutzen können?

Im Beispiel suchen wir die Überschrift des ersten Beitrags auf der Startseite von schieb.de:

  1. Starten Sie Chrome, und laden Sie www.schieb.de.
  2. Drücken Sie jetzt auf [F12], um die Entwicklertools einzublenden.
  3. Nun öffnen Sie das Suchfeld durch Drücken von [Strg] + [F].
  4. Geben Sie den folgenden CSS-Selektor ein: .box h2.
  5. Automatisch wird die erste Überschrift in einer Box gefunden. Ähnlich funktioniert dies mit allen passenden CSS-Selektoren.

Die Suche im DOM über CSS-Selektoren ist dabei nicht nur für Entwickler interessant, die jQuery nutzen. So finden Sie auch alle gleichen Tags – schnell und praktisch.

chrome-entwicklertools-suche-per-css-selektor

"Die 50 besten Office-Tipps"

Kostenloses eBook

00
Months
00
Days
00
Hours
00
Minutes
00
Seconds
15585

Jede Woche kostenlos per Mail

15856

KOSTENLOS: NEWSLETTER MIT TIPPS

Scroll to Top