elem:nth-child(3) qui sélectionne elem:first-child

Invité · 17/06/2013, 10h55

Bonjour,

J'ai un soucis avec mon code je ne vois vraiment pas où est le problème

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
<div id="wrapper">            
    <div id="compagny_page">
        <fieldset>
            <legend>blabla</legend>
        </fieldset>
        <fieldset>
            <legend>blabla</legend>
        </fieldset>
        <fieldset>
            <legend>blabla</legend>
        </fieldset>                
    </div>            
</div>
</div>

Code :

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
#compagny_page {
    padding: 4px 4px 24px 4px;
    color: #f1f3f2; /* LITE GREY */
}
 
#compagny_page > fieldset {
    margin: 10px 10px 0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    -khtml-border-radius: 4px;
    border-radius: 4px;
    border-color: transparent;
    background-color: #F1F3F2; /* LITE GREY */
    color: grey;
}

Ce qui ne va pas c'est que j'utilise :nth-child(3) pour cibler mon PREMIER élément fieldset de la page... C'est incompréhensible, je ne vois vraiment pas pourquoi quand j'utilise :first-child il ne me sélectionne rien...

J'ai donc le code suivant et j'aimerais comprendre ce qu'il se passe dans ma page ?

Code :

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

1
2
3
4
#compagny_page fieldset:nth-child(3)
{
    background: yellow;
}

Je vous assure que je n'ai aucun autre fieldset dans la page à part les 3 présents dans mon code.

**NoSmoking** · 17/06/2013, 11h05

Bonjour,
je passe à coté de quelque chose, car ton 3éme FIELDSET est bien jaune.

Ton navigateur prend t-il en compte CSS3?

Invité · 17/06/2013, 11h11

Oui oui ! Je suis sur chrome de toute façon les autres navigateurs agissent de même.
Ce n'est pas la première fois que cela m'arrive et pourtant mon code est propre, nickel, et je ne comprends donc pas ce qui se passe ici...

**rodolphebrd** · 17/06/2013, 11h11

Bonjour,

pour sélectionner le 1er élément (sachant que first-child fonctionne

):

Code :

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

1
2
3
4
5
 
#compagny_page fieldset:first-of-type
{
    background: yellow;
}

Invité · 17/06/2013, 11h28

Merci, cela fonctionne.

Cependant il y a une incohérence sur mon code et cela n'est pas normal du tout, j'aimerais bien résoudre ce problème plutôt que de me contenter de ce qui fonctionne.
J'utilise toujours les :first-child et :last-child, je ne comprends pas pourquoi j'ai ce problème certaines fois...

**Torgar** · 17/06/2013, 11h33

Poste nous plus de code alors si tu veux qu'on t'aide à comprendre. Mieux, si tu as un exemple en ligne de ce qui ne fonctionne pas on sera à même de t'aider d'avantage.

Invité · 17/06/2013, 12h00

Très bien, voilà tout le code:

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html>
    <head>
        <title>blablabla- La société</title>
        <?php require_once './_statments.inc.php'; ?>
    </head>
    <body>
        <?php include './_menu.inc.php'; ?>
 
        <?php include './_banner.inc.php'; ?>
 
        <div id="wrapper">
 
            <div id="compagny_page">
                <h4>Notre société</h4>
                <h1>blablabla</h1>
 
                <fieldset>
                    <div>
                        <label>Adresse</label>
                        <p>
                            adresse
                        </p>
                    </div>
 
                    <div>
                        <label>Tel</label>
                        <p>
                            04 04 04 04 04
                        </p>
                    </div>
 
                    <div>
                        <label>Potable</label>
                        <p>
                            06 06 06 06 06
                        </p>
                    </div>
 
                    <div>
                        <label>Mail</label>
                        <p>
                            contact@blablabla.fr
                        </p>
                    </div>
 
                    <div>
                        <label>Horaires</label>
                        <ul>
                            <li><span>Lundi</span>de 8h00 à 12h00&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;de 13h30 à 17h00</li>
                            <li><span>Mardi</span>de 8h00 à 12h00&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;de 13h30 à 17h00</li>
                            <li><span>Mercredi</span>de 8h00 à 12h00&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;de 13h30 à 17h00</li>
                            <li><span>Jeudi</span>de 8h00 à 12h00&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;de 13h30 à 17h00</li>
                            <li><span>Vendredi</span>de 8h00 à 12h00&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;de 13h30 à 17h00</li>
                        </ul>
                    </div>
 
                </fieldset>
 
                <fieldset>
                    <legend>L'équipe</legend>
                </fieldset>
 
                <fieldset>
                    <legend>Evolution de l'entreprise</legend>
                </fieldset>
 
            </div>
 
        </div>
        <?php include './_footer.inc.php'; ?>
        <?php include './_copyright.php'; ?>
    </body>
</html>

Code :

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
#compagny_page {
    padding: 4px 4px 24px 4px;
    color: #f1f3f2; /* LITE GREY */
}
 
#compagny_page > h4 {
    margin-bottom: 0;
    text-align: center;
}
 
#compagny_page > h1 {
    margin-top: 0;
    text-align: center;
}
 
#compagny_page > fieldset {
    margin: 10px 10px 0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    -khtml-border-radius: 4px;
    border-radius: 4px;
    border-color: transparent;
    background-color: #F1F3F2; /* LITE GREY */
    color: grey;
}
 
#compagny_page fieldset:first-child {
    background: red;
}
 
#compagny_page > fieldset > legend {
    padding: 4px 12px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    -khtml-border-radius: 4px;
    border-radius: 4px;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.2) inset;
    -webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.2) inset;
    -moz-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.2) inset;
    -o-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.2) inset;
    background-color: grey;
    color: white;
    font-family: 'Carrois Gothic SC', sans-serif;
}
 
#compagny_page > fieldset > div {
    overflow: auto;
    margin: 12px 0 0;
}
 
#compagny_page > fieldset > div > label {
    float: left;
    margin: 0 8px;
    min-width: 120px;
    height: 100%;
    line-height: 26px;
    font-weight: bold;
}
 
#compagny_page > fieldset > div > p,
#compagny_page > fieldset > div > ul {
    margin: 0;
    float: left;
}
 
#compagny_page > fieldset > div > ul > li {
    padding: 4px;
}
 
#compagny_page > fieldset > div > ul > li > span {
    display: inline-block;
    width: 120px;
    font-weight: bold;
}

elem:nth-child(3) qui sélectionne elem:first-child

CSS

Vue hybride

Discussions similaires

Partager

Partager