ugrás a tartalomhoz

CSS fist-child, last-child, nested

therest · 2011. Okt. 11. (K), 15.12
Helló!

Van egy ilyen struktúrám:

<div class="blockTitle">
<div>Blokk cím</div>
<div>Block menu</div>
</div>
A kérdésem az, hogy hogyan tudok olyan css stílusokat definiálni, amivel a két belső div-et külön formázom. Max CSS2, crossbrowser megoldást keresnék rá.

Próbáltam a :first-child, :last-child segítségével megoldani, de ha jól szűrtem le ezeket nem lehet saját osztályhoz társítani, mint amilyen a .blockTitle.
 
1

Példa

Poetro · 2011. Okt. 11. (K), 15.53
<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <style type="text/css">
    body {
      background: grey;
    }
    .blockTitle {
      background: white;
    }
    .blockTitle div:first-child {
      background: red;
    }
    .blockTitle div:last-child {
      background: green;
    }
  </style>
</head>
<body>
  <div class="blockTitle">
    <div>Piros</div>
    <div>Fehér</div>
    <div>Zöld</div>
  </div>
</body>
</html>
2

Köszi. Nekem kicsit fura ez.

therest · 2011. Okt. 11. (K), 16.46
Köszi. Nekem kicsit fura ez. A .BlockTitle div {} a blockTitle osztály minden div gyermekére vonatkozik, igaz? A fenti .blockTitle div:first-child {} akkor miért nem a blockTitle összes div gyermekének, első gyermekére vonatkozik?
3

.blockTitle div:first-child

Poetro · 2011. Okt. 11. (K), 16.54
.blockTitle div:first-child {} akkor miért nem a blockTitle összes div gyermekének, első gyermekére vonatkozik?

Az a .blockTitle div :first-child lenne. Amennyiben csak tényleges gyermekekről lenne szó, akkor .blockTitle > div > :first-child.

A div:first-child-dal azokra korlátozok, amik div-ek és :first-child-ok is egyszerre.
4

Ha jól látom, akkor mindössze

therest · 2011. Okt. 12. (Sze), 16.36
Ha jól látom, akkor mindössze egy space a különbség van ".blockTitle div :first-child" és ".blockTitle div:first-child" között?
És akkor az első a blockTitle összes div gyermekének, első gyermekére vonatkozik, a második pedig amik div-ek és :first-child-ok is egyszerre?

Milyen magyar nyelvű forrást ajánlanál CSS témában, ami átfogó, és az újabb dolgokat is (css3) érinti?
5

szabályok

Poetro · 2011. Okt. 12. (Sze), 17.01
Ha a két elem között csak szóköz van, akkor az első akár milyen mélységű leszármazottjáról van szó. Természetesen megadhatsz viszonyt a kettő között, a > a közvetlen gyermeket jelenti például. Magyar nyelvűt nem tudok neked ajánlani, de van sok angol könyv a témában. Például HTML5 & CSS3 for the Real World. De Amazon-on, vagy Kiskapunál valószínűleg találsz több könyvet is CSS témában, magyarul vagy gyengét, vagy régit.
6

Magyar könyv

Pepita · 2011. Okt. 14. (P), 14.33
Ajánlom könyveit, többek közt a gyerek - szülő - stb. elég jól benne van a Web programozás alapismeretek című könyvében.