Wie finde ich den richtigen CSS-Selektor?

[peter.fl]

Guten Abend

Vorausschicken muss ich, dass ich kein Programmierer bin und mich mit Contao nur hobbymässig befasse.

Bis vor einigen Jahren gab es zu Firefox das Plug-In "Firebug". Dieses brauchte ich u.a. immer, wenn ich einen CSS-Selektor bestimmen musste. Ich konnte das fragliche Element auf der Seite markieren, dann im unteren Teil den angezeigten Selektor speichern und im CSS-Editor von Contao platzieren. Ob das das optimale Vorgehen war, weiss ich nicht, aber ich kam damit gut zu Rank.

Nun gibt es "Firebug" nicht mehr. Empfohlener Ersatz sind z.B. die Entwicklerwerkzeuge von Firefox. Leider habe ich bis heute nicht herausgefunden, wie ich mit diesen auf die gleiche einfache Art wie oben beschrieben einen CSS-Selektor herausfinden kann. Wie geht das? Oder welches andere Werkzeug ist dazu auch gut geeignet?

In Anbetracht des angekündigten Wegfalls des contao-internen CSS-Editors sind Antworten auf diese Fragen für mich interessant.

Was sagt der Profi dem Amateur?

[andre.5tz]

Hallo,

ich nutze dafür immer Firefox Web-Entwickler Inspektor. Klappt eigentlich ganz gut. Strg+Umschalt+C und dann einfach mal mit der Maus über die Seite gehen.
Bin mir aber nicht sicher verstanden zu haben, was Du genau suchst.

[xchs]

Leider habe ich bis heute nicht herausgefunden, wie ich mit diesen auf die gleiche einfache Art wie oben beschrieben einen CSS-Selektor herausfinden kann. Wie geht das?

Wie bist Du denn bisher mit Firebug vorgegangen? Mit den browsereigenen Entwicklerwerkzeugen funktioniert es doch im Prinzip genau gleich wie mit Firebug.

[do_while]

Du klickst einfach mit der rechten Maustaste auf die Stelle, die Du untersuchen möchtest und drückst dann die Taste Q.
Dann bist Du bereits an der richtigen Stelle und siehst die dort verwendeten CSS-Selektoren usw. (wie beim Firebug)

[peter.fl]

Wie bist Du denn bisher mit Firebug vorgegangen?

Annahme: Ein Titel (Text) ist mit einer bestimmten Farbe zu versehen.
1. Seite mit dem zu färbenden Titel aufgerufen
2. Firebug gestartet
3. Im Firebugteil (unten, wo all die technischen Infos sind) auf ein Markierungssymbol geklickt (ich glaub, es war ein Pfeil)
4. Titel bzw. Element, wo er drin steht, mit der Maus markiert
5. Im Firebugteil unten auf ein Ausklappmenu für CSS geklickt
6. In diesem Menu auf einen Eintrag geklickt, der den Selektor für den Titel in den Zwischenspeicher stellt
7. Selektor in das entsprechende Feld im Contao-CSS-Editor gestellt

Der Ablauf stimmt, meine ich. Die Bezeichnungen sind vermutlich nicht ganz präzise.

Mit den browsereigenen Entwicklerwerkzeugen funktioniert es doch im Prinzip genau gleich wie mit Firebug.

Ja, das erwarte und vermute ich auch. Nur habe ich den Dreh bislang noch nicht rausbekommen. Wo finde ich den Selektor, nachdem ich das zu bearbeitende Element auf der Webseite markiert habe?

[Spooky]

Wenn für das Element kein Style festgelegt wurde, kannst du auch keinen "Selektor finden". Dann musst du dir den selbst ausdenken.

[derRenner]

schau mal hier rein - vielleicht hilft dir das einen Schritt weiter
https://www.youtube.com/watch?v=KU96gwFCpZA

[lucina]

Ja, das erwarte und vermute ich auch. Nur habe ich den Dreh bislang noch nicht rausbekommen. Wo finde ich den Selektor, nachdem ich das zu bearbeitende Element auf der Webseite markiert habe?

Der steht doch a) im Quelltext und b) könntest Du auch mal auf das kleine "*"-Zeichen drücken, damit ein Stylefragment mit der nötigen Klasse im Inspektor erstellt wird.

devtools.jpg