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 wird das benachbarte Element Button eindeutig identifizierbar:
input[value="memberslogout"] + button { margin-bottom: .5ex;}