CSS Pseudo Classes avec l'article

J'essaie d'obtenir le premier article sur la page en utilisant CSS. Je l'ai essayé ce qui suit:CSS Pseudo Classes avec l'article

article:first { 
    background: blue; 
}

article:first-child { 
    background: blue; 
}

Cependant aucune de ces semblent faire quoi que ce soit.

Mon balisage HTML est comme suit (étêtés et contenu ellipsed):

... 
<body> 
    <div id="wrapper"> 
     <header> 
      <hgroup> 
       ... 
      </hgroup> 
     </header> 
     <article> 
      ... 
     </article> 
     <article> 
      ... 
     </article> 
    </div> 
</body>

J'utilise aussi la dernière version de Chrome.

Source

2011-08-27 diggersworld

Il n'y a pas de: première pseudo-classe en CSS. – BoltClock

Ce que vous cherchez est #wrapper article:first-of-type, mais malheureusement, il n'est pas encore largement supporté.

Vous pouvez cependant essayer #wrapper header + article, pour lequel le support est plus répandu.

Source

2011-08-27 10:57:41 DanMan

Nice qui fonctionne ... Je ne suis pas trop agité si son entièrement pris en charge, je ne l'utilise que pour quelque chose de mineur. Le site ne casse pas si je suis incapable de styler le premier article. = D – diggersworld

Essayez de modifier votre balisage:

... 
<body> 
    <div id="wrapper"> 
     <header> 
      <hgroup> 
       ... 
      </hgroup> 
     </header> 
     <section> 
      <article> 
       ... 
      </article> 
      <article> 
       ... 
      </article> 
     </section> 
    </div> 
</body>

:first-child fonctionne uniquement avec réels premiers éléments enfants (il était header dans votre cas).

Source

2011-08-27 10:29:38

Ou juste utiliser ': nth-child (2)' (CSS3) – xfix

CSS Pseudo Classes avec l'article

Répondre

Questions connexes