Discussion :

[pierrot10]

Bonjour à tous,

J'ai une escalde de li, mais simple

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
<ul class="ul_research">
<li>
<p>tata</p>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>
<p>titi</p>
<ul><li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
 
</ul>

J'aimerais que ce code css n'affecte que le premier li du premier niveau.
Dans mon cas, les li du deuxieme niveau sont aussi affectés et je ne le veux pas.

Code CSS :

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

1
2
 
ul.ul_research li{margin:0px 0px 10px 0px;list-style-type:none; border-bottom:1px solid #cccccc;}

Comment puis-.je le faire de maniere simple et propre?
J'ai regardé les selctor, mais sans conviction

Merci

[rodolphebrd]

Bonjour,

Je ne sais pas si votre question est claire...
Pour tester:

Code css :

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

1
2
3
li:first-child{
  color:red;
}

[pierrot10]

Ben j'aimerai que ca affecte que les li du permier niveau, pas ceux du deuxieme niveau.

le li:first-child, il n'affectera que les premiers <li>

[rodolphebrd]

Solution 1 : donner une classe au li voulu

Solution 2 (histoire de se compliquer la vie) :

Code :

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

1
2
3
4
5
  li:first-child{
  color:red;
}
  ul ul li:not(:last-child){
	color:black; /* rétablissement de la couleur par défaut*/

Solution 3 :

Code :

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

1
2
3
li:first-child>:first-child {
   color:red;
}

Note : il n'est pas pertinent de donner un nom de classe comme vous le faites : au lieu de ul_research je verrais research.

Edit : rajout de la solution 3

[Bisûnûrs]

Heu, ce n'est pas plutôt simplement ça :

Code :

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

.ul_research > li:first-child {}

?

J'ai une escalde de li, mais simple

Oui enfin, avec une indentation correcte, on s'en rend mieux compte :

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
<ul class="ul_research">
   <li>
      <p>tata</p>
      <ul>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
      </ul>
   </li>
   <li>
      <p>titi</p>
      <ul>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
      </ul>
   </li>
</ul>

[rodolphebrd]

Non pas si on veut sélectionner le premier li de premier niveau: http://codepen.io/anon/pen/shimk

[Bisûnûrs]

Oui, mais il n'y a qu'à rajouter un 2e <p>tata</p> dans le li pour en voir la limite de la solution.

Peut-être qu'il vaudrait mieux appliquer une partie du style au ul de second niveau, de manière inversée. Sans idée du rendu final, on ne peut émettre que des spéculation.

(Je ne trouve pas l'exemple de la couleur exemplaire, vu que c'est une propriété héritée)

Parce que sinon, sans se casser le c*l il y a ça dans ce cas là :

Code :

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

.ul_research > li:first-child > p {}

[rodolphebrd]

Oui, mais il n'y a qu'à rajouter un 2e <p>tata</p> dans le li pour en voir la limite de la solution.

l'idée (enfin la mienne sans autres infos) est de ne cibler que le premier élément. Et l'objectif est atteint.

(Je ne trouve pas l'exemple de la couleur exemplaire, vu que c'est une propriété héritée)

avec ce style c'est plus parlant...http://codepen.io/anon/pen/shimk

Parce que sinon, sans se casser le c*l il y a ça dans ce cas là :

Oui d'accord avec le fait de ne pas se prendre la tête . Au départ j'ai suggéré:

Code html :

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

1
2
3
4
5
<ul class="ul_research">
   <li>
      <p class="first">tata</p>
      <ul>
         <li></li>

Code :

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

.first{}