header-xh-01 header-xh-02 header-xh-03 header-xh-04 header-xh-05 header-xh-06 header-xh-07 header-xh-08 header-xh-09 header-xh-10 header-xh-11 header-xh-12 header-xh-13 header-xh-14
Lembach's nichtkommerzielle Website rund um CMSimple_XH
Templates, Plugins, Tools, Programme
und Tips und Tricks die mir wichtig sind
Sie sind hier: Startseite > Tipps und Tricks zusammengetragen > CSS-Selektoren - trickreiche Formatierungen

CSS-Selektoren - trickreiche Formatierungen/Adressierung von Elementen ohne class oder ID

Bevor ich die Links der gefundenen Tutorials aufliste:

Ich habe in meinem Template die Möglichkeit eingebaut das Plugin Memberpages_XH automatisch zu integrieren, ohne eine Notwendigkeit im Plugin eine einzige Anpassung des Styles vorzunehmen.

Damit die Ausgaben des Plugins zum Template passen, musste überall dort, wo eigentlich das Plugin-CSS angepasst werden müsste, im stylesheet.css des Templates die Styles des Plugins übersteuert (überschrieben) werden.

Solange man auf Style-Definitionen von Elemente mit Klassen oder IDs zugreifen kann, ist das zwar mit Arbeit verbunden, aber nicht wirklich ein unlösbares Problem.

Was aber, wenn man ein Element formatieren möchte, das keine ID, keine Klasse und auch kein umgebendes Element mit ID oder Klasse hat? Wie adressiert man so ein Element?

Beispiel:

Im Code des Plugins sind die oben abgebildeten Zeilen enthalten. Um die blau unterlegte Zeile geht es:
Wie spreche ich das Element Button an?

Es ist ein Kind von <form> und dieses ist ein Kind von <div>, aber diese Eltern - Kind - Beziehung trifft sicher auch auf viele andere Buttons zu. Zur eindeutigen Adressierung genau dieses und nur dieses Buttons reicht das nicht!

Aber: Es gibt nette Leute im Netzt, die einem das dazu erforderliche Wissen vermitteln.

Um es kurz zu machen: Das Element <input> unmittelbar vor dem Button hat eine eindeutige Eigenschaft. Der Wert des versteckten Inputs lautet "memberslogout". Dadurch kann das benachbarte Element Button eindeutig identifizierbar:

input[value="memberslogout"] + button {
        margin-bottom: .5ex;
}

Einige Links zu Websites, die mir sehr geholfen haben:

https://code.tutsplus.com/de/tutorials/the-30-css-selectors-you-must-memorize--net-16048
https://developer.mozilla.org/de/docs/Web/CSS/CSS_Selectors
https://www.mediaevent.de/css/css3-selektor-pseudo.html
https://www.w3.org/TR/CSS21/selector.html%23id-selectors
https://drafts.csswg.org/selectors-3/

| Seitenanfang | |  - - - By CrazyStat - - -