CSS : heritage

pitidev · 30 Avril 2004

bonjour

qui aurais un lien ou ce genre de chose serait approfondi :

Le pseudo-élément :child regroupe tous les enfants d'un tag. Par exemple
:

<a>



<c>

<d></d>

</c>



</a>

<a> est parent de et ancêtre de <c> et <d>.

 est enfant de <a>, parent de <c> et ancêtre de <d>.

<c> est descendant de <a>, enfant de et parent de <d>.

<d> est desendant de <a> et et enfant de <c>.

Pour aller plus loin :

- si j'écris a:child, ça ne concerne que .

- si j'écris a *, ça concerne tous les descendants.

- si j'écris a c, ça ne concerne que les <c> descendants de <a>.

- si j'écris a > c, ça ne concerne que les <c> enfants de <a>, donc ici

personne.

- si j'écris a + d, ça ne concerne que les <d> précédés d'un <a>, soit

<a></a>, <d></d>.

Donc, ici #textet:child équivaut à #textet > p, #textet > img.

en effet, a l'heure actuel, dans mes style j'ai ceci :

 div#fin {
  background-image: url(../../../images/icons/vignette1.jpeg);
  background-repeat: no-repeat;
  width: 173px;
  height: 102px;
  padding-top: 105px;
  float: left;
 }
 div#pro {
  background-image: url(../../../images/icons/vignette2.jpeg);
  background-repeat: no-repeat;
  width: 173px;
  height: 102px;
  padding-top: 105px;
  float: left;
 }
 div#too {
  background-image: url(../../../images/icons/vignette3.jpeg);
  background-repeat: no-repeat;
  width: 173px;
  height: 102px;
  padding-top: 105px;
  float: left;
 }
 div#dea {
  background-image: url(../../../images/icons/vignette4.jpeg);
  background-repeat: no-repeat;
  width: 173px;
  height: 102px;
  padding-top: 105px;
  float: left;
 }