Wie kann ich in CSS alle <a>-Elemente auswählen, die sich nicht in einem <li> Tag befinden?
Kurz und knapp, nutz die Kaskade möglichst sinnvoll. Mit anderen Worten, zunächst globale Formatierungen definieren. Erst danach mithilfe von kombinierten Selektoren oder durch verwenden von Klassen (letzteres empfehle) einzelne Elemente und/oder Elemente-Gruppen (Stichwort: Modulare Web-Entwicklung) speziell selektieren.
HTML Markup (Beispiel):
<article class="post">
<p>some content here and a simple link like this: <a href="#">go!</a></p>
<a class="btn btn-more" href="#">Read more...</a>
</article>
CSS:
/* globals */
a {
text-decoration: none;
transition: all ease-in-out 350ms;
}
a:hover {text-decoration: underline;}
/* primary styles */
.btn {
color: rgba(255, 255, 255, 0.6);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
inset 0 -2px 0 rgba(0, 0, 0, 0.5),
0 2px 4px rgba(0, 0, 0, 0.3);
border-radius: 25px;
padding: 8px 15px;
}
.btn:hover {
color: rgba(255, 255, 255, 0.8);
box-shadow: inset 0 2px 0 rgba(255,255,255,.2),
inset 0 -1px 0 rgba(0,0,0,.5)
}
/* special module- or element-styles */
.btn-more {background: #5f42f4;}
.btn-more:hover {background: #5338e0;}
Im oben gezeigten Beispiel werden die gesetzten Anker-Elemente (Link-Tags) zunächst möglichst sinnvoll gruppiert und anschließend mithilfe von CSS unterschiedlich in ihrem Aussehen und Verhalten formatiert.
Mit dem Element-Selektor a werden zunächst sämtliche Anker angesprochen und nach eigenem Gusto formatiert. Man schafft genauer gesagt eine einheitlich bzw. neutrale Basis, auf der alle nachfolgenden Formatierungen aufbauen (können).
Jeder Webbrowser verwendet eigene Default-Styles um Elemente (Selektoren) darzustellen. Durch das Definieren von global geltenden Regeln schafft man zunächst einen einheitlichen/gleichen Ausgangspunkt. Man normalisiert oder setzt die Browser-eigenen Formatierungen auf einen gleichen Wert zurück (Stichwort: CSS Reset).
- Eric Meyer's »Reset CSS«: https://goo.gl/pCNFP1
- Normalize.css: https://necolas.github.io/normalize.css/
Da ich nicht zuweit ausholen möchte (weil es hier definitiv den Rahmen sprengen würde), den restlichen Teil soweit wie möglich aufs wesentliche herunterbreche. In der modularen Web-Entwicklung werden Formatierung sinnvoll gruppiert und so angelegt, das sie 1. wiederverwendet und 2. nach bedarf erweitert werden können.
Im oben gezeigten Beispiel siehst du einmal einen regulären Link innerhalb eines Textes und darauf folgend ein Anker-Element mit den Klassen btn (btn = Button) und btn-more, das als Button dienen soll. Kurz: Das letzte Element keinen regulären Link darstellen soll.
Ähnlich wie bei der globalen Formatierung zunächst festgelegt wird, wie Elemente mit der Klasse btn (hier ein Anker) dargestellt werden sollen. Durch weitere Klassen wie btn-more Elemente hingegen weiter spezifiziert werden. Kurz um - man so einfach bestehende Eigenschaften und Werte erweitert und/oder durch neue überschreibt (Kaskade eben ;) .
Zu deiner Frage: Einfach global das Aussehen von regulären Links mit dem Element-Selektor (a) festlegen und anschließend alle Anker-Elemente innerhalb von List-Items (li) überschreiben. Sei es mit einer Klasse oder durch selektieren über »verkettete« Selektoren.
HTML:
<a href="#">Go to!</a>
<ul class="nav nav-primary">
<li><a class="active" href="#">list-item 1</a></li>
<li><a href="#">list-item 2</a></li>
<li><a href="#">list-item 3</a></li>
</ul>
CSS:
/* -- global */
a {color: red; background: blue;}
/* -- primary styles */
.nav a {color: yellow; background: green;}
/* or */
ul a {...}
Ich hoffe alles war soweit verständlich. Falls doch etwas unklar sein sollte oder du noch weitere Fragen hast, dich gerne melden kannst. Dir ganz allgemein das kostenlose SelfHTML Wiki sowie das Mozilla Developer Network empfehlen kann. Auch schadet es nicht, wenn du dir mal in aller ruhe die HTML und CSS Spezifikation beim W3C durchliest.
LG medmonk
