Childen Elemente ohne eigene CSS-Class mit css ansprechen und gestalten
Am folgenden beispiel habe ich alle Navigationspunkte ohne eigene css-class angesprochen und jeweils eine andere Farbe gegeben.
<div class="akkordeon"> <div> <input id="akk-1" name="akkordeon-1" type="checkbox" /> <label for="akk-1">Klick mich!</label> <p> <strong>Text
01</strong><br /> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
</div> <div> <input id="akk-2" name="akkordeon-1" type="checkbox" /> <label for="akk-2">Mich auch!</label> <p> <strong>Text 02 Lorem
ipsum</strong><br /> <br /> Lorem ipsum dolor sit amet, consetetur sadipscing elitr. </p> </div> <div> <input id="akk-3" name="akkordeon-1" type="checkbox"
/> <label for="akk-3">Akkordeon</label> <p> <strong>Text 03 Lorem ipsum</strong><br /> <br /> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna. </p> </div> </div> <style> .akkordeon { width: 20em; padding: 0.2em; background: white; border: 1px solid
#e4e4e4; font-size:12px; } .akkordeon label{ padding: 0.2em 1em; margin-bottom: 0.2em; position: relative; display: block; height: 1.5em; cursor: pointer; background: black; color: white; }
.akkordeon label:hover{ background: lime; color: black; } .akkordeon input + label { transition: all 0.5s ease-in-out; } .akkordeon input:checked + label, .akkordeon input:checked + label:hover{
background: orange; } .akkordeon p { overflow: hidden; height: 0; margin: 0; transition: all 0.5s ease-in-out; } .akkordeon input:checked ~ p{ transition: all 0.5s ease-in-out; height: 7em; }
.akkordeon { width: 20em; padding: 0,2em; background: white; border: 1px solid #8a9da8; } .akkordeon label{ padding: 0.2em 1em; margin-bottom: 0.2em; position: relative; display: block; height:
1.5em; cursor: pointer; background: black; color: white; } .akkordeon label:hover{ background: grey; color: #fff; } .akkordeon input + label { transition: all 0.5s ease-in-out; } .akkordeon
input:checked + label, .akkordeon input:checked + label:hover{ background: orange; } .akkordeon input{ display: none; } .akkordeon p { overflow: hidden; height: 0; margin: 0; transition: all 0.5s
ease-in-out; } .akkordeon input:checked ~ p{ transition: all 0.5s ease-in-out; height: 7em; } </style>
- testnavigation 01
- testnavigation 02
- testnavigation 03
- testnavigation 04