Ergebnis 1 bis 8 von 8

Thema: Wie finde ich den richtigen CSS-Selektor?

  1. #1
    Contao-Fan
    Registriert seit
    17.11.2012.
    Beiträge
    505

    Standard Wie finde ich den richtigen CSS-Selektor?

    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?
    Geändert von peter.fl (29.07.2020 um 19:26 Uhr) Grund: "einfach" aus Titel entfernt

  2. #2
    Contao-Fan
    Registriert seit
    19.06.2009.
    Ort
    Mittelhessen
    Beiträge
    431

    Standard

    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.
    Geändert von andre.5tz (28.07.2020 um 20:22 Uhr)

  3. #3
    Administrator Avatar von xchs
    Registriert seit
    19.06.2009.
    Beiträge
    14.179
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von peter.fl Beitrag anzeigen
    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.
    Contao Community Administrator
    [Unterstützungsmöglichkeiten]

  4. #4
    Contao-Urgestein Avatar von do_while
    Registriert seit
    15.06.2009.
    Ort
    Berlin | Deutschland
    Beiträge
    3.410
    Partner-ID
    1081
    User beschenken
    Wunschliste

    Standard

    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)

  5. #5
    Contao-Fan
    Registriert seit
    17.11.2012.
    Beiträge
    505

    Standard

    Zitat Zitat von xchs Beitrag anzeigen
    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.

    Zitat Zitat von xchs Beitrag anzeigen
    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?

  6. #6
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Vienna, Austria
    Beiträge
    24.310
    Partner-ID
    10107
    User beschenken
    Wunschliste

    Standard

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

  7. #7
    Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    1.832
    User beschenken
    Wunschliste

    Standard

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


  8. #8
    Administratorin Avatar von lucina
    Registriert seit
    19.06.2009.
    Ort
    Kiel (DE)
    Beiträge
    6.691
    Partner-ID
    152
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von peter.fl Beitrag anzeigen
    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

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •