Valaki, aki jól ért a CSS-hez, tudna segíteni az alábbiban, mert már hetek óta szenvedek vele, pedig nagyon egszerűenek tűnik?
Az alábbi listát szeretném a D betűtől felváltva színezni , de az elsőnek a narancssárgának kéne lennie.
Sajnos az alábbi megoldás nem jó, ha páratlan sok sor van előtte (A,B,C). Meg lehet ezt oldani?
Természetesen nem úgy, hogy a kék helyett narancssárgát írok és fordítva, mert ez csak egy szimpla példa, de általában nem tudom, hogy hány sor van előtte.
<style type="text/css">
.innen:nth-child(odd) {background:orange;}
.innen:nth-child(even) {background:blue;}
</style>
</head>
<body>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li class="innen">D</li>
<li class="innen">E</li>
<li class="innen">F</li>
<li class="innen">G</li>
</ul>
</body>
válasza:Szerintem rakd be őket külön div-be így:
html:
-------------------------------------
<div class="kek">egy</div><br/>
<div class="piros">kettő</div><br/>
<div class="zold">három</div><br/>
<div class="sarga">négy</div><br>
-------------------------------------
css:
-------------------------------------
.kek {
color: #0001FF;
}
.zold{
color: #04FF00;
}
.sarga {
color: #E8CA0C;
}
.piros {
color: #FF0000;
}
nem akartam leírni a teljes problémát
nem tudom előre a sorok számát, és ha berakok mégegyet, akkor nem akarok mindent átírni, tehát a javasolt megoldás nyilván nem jó
válasza:<style type="text/css">
.innen:nth-child(odd) {background:orange;}
.innen:nth-child(even) {background:blue;}
</style>
</head>
<body>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li><p class="innen">D</p></li>
<li><p class="innen">E</p></li>
<li><p class="innen">F</p></li>
<li><p class="innen">G</p></li>
</ul>
</body>
Próbáld meg így.
válasza:vagy:
p:nth-child(odd) {background:orange;}
p:nth-child(even) {background:blue;}
válasza:Válaszd ketté a kérdéses listákat két listára, amik egymás alatt szerepelnek:
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<ul id="szines">
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
</ul>
és a css:
#szines li:nth-child(odd) {background:orange;}
#szines li:nth-child(even) {background:blue;}
Persze, azt jobb ha tudod, hogy az nth-child szelektort az internet explorer nem használja!
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!