Cibler le premier paragraphe

**keokaz** · 22/01/2014, 13h21

Bonjour j'essaye de cibler le premier paragraphe mais je n'y arrive pas

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<div id="zen-requirements" class="requirements" role="article">
<h3>Requirements</h3>
<p>
Where possible, we would like to see mostly
<abbr title="Cascading Style Sheets, levels 1 and 2">CSS 1 & 2</abbr>
usage.
<abbr title="Cascading Style Sheets, levels 3 and 4">CSS 3 & 4</abbr>
should be limited to widely-supported elements only, or strong fallbacks should be provided. The CSS Zen Garden is about functional, practical
<abbr title="Cascading Style Sheets">CSS</abbr>
and not the latest bleeding-edge tricks viewable by 2% of the browsing public. The only real requirement we have is that your
<abbr title="Cascading Style Sheets">CSS</abbr>
validates.
</p>
<p>
babljbljsdlqjbld
</p>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
#zen-requirements  p:first-child
{
    background: red;
}

je n'ai aucun fond rouge , comme faire,
merci de vos réponse

**Bisûnûrs** · 22/01/2014, 14h21

C'est parce que tu lui demandes de sélectionner le p qui serait le premier noeud (:first-child), or le premier noeud n'est pas un p mais un h3.

Tu peux du coup faire ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#zen-requirements h3 + p {}

**keokaz** · 22/01/2014, 15h16

merci

, c'est exactement ça que je souhaitais

**Muchos** · 23/01/2014, 01h54

Il y a une solution plus souple en CSS3 : :first-of-type.

Ex:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html dir="ltr" lang="fr-FR">
<head>
  <meta charset="UTF-8" />
  <title>Fist-of-type</title>
  <style type="text/css">
p:first-of-type {
  color: red;
}
 </style>
</head>
<body>
  <h3>TEST</h3>
  <p>red</p>
  <p>black</p>
</body>
</html>

Cibler le premier paragraphe

CSS

Vue hybride

Discussions similaires

Partager

Partager