Dans le code html suivant :

<aside>
        <ol>
            <li>
                <h3>Avantages</h3>
                <ul>
                    <li>lorem</li>
                    <li>ipsun</li>
                    <li class="montree2">dolor</li>
                </ul>
            </li>

            <li>
                <h3>Désavantages</h3>
                <ul>
                    <li>lorem</li>
                    <li>ipsum</li>
                    <li>dolor</li>
                </ul>
            </li>

            <li>
                <h3>Considérations</h3>
                <ul>
                    <li>lorem</li>
                    <li>ipsum</li>
                    <li>dolor
                        <ol>
                            <li>Item 1</li>
                            <li>Item 2</li>
                            <li>Item 3</li>
                        </ol>
                    </li>
                </ul>
            </li>
        </ol>
    </aside>

je dois sélectionner par css sans modifier le html chaque premier élément des 4 listes sans utiliser le "," mais les opérateurs complexes sont permis et ce,  en n'utilisant que 2 styles !

Quel brave s'ose se risquer et comment ? ;-P

Bonjour,

Manque de Politesse

Ton message ne comporte pas ou peu de formules de politesse (« Bonjour », « Merci », « Au revoir », etc.). Les règles du site exigent que chaque nouveau message comporte un minimum de politesse. Après tout, les gens qui répondent le font gratuitement, sur leur temps libre. Ils méritent bien un minimum de considération, n'est-ce pas ?

Et sinon… ça fait pas mal de sujets que tu postes, où tu ne peux pas modifier le HTML parce que c'est pour des exercices. Alors, avouons que présenter ça comme un défi… c'est suspicieux. On n'est pas là pour faire tes devoirs à ta place, mais t'aider à les faire.

Alors, montre-nous ce que tu as fait, plutôt que de nous demander de le faire, non ?

(et il y a 5 listes dans ton code, pas 4)

-
Edité par Lamecarlate 13 janvier 2019 à 21:40:19

Bonjour à tous alors,

C'est un défi pour moi en tout cas...

Voici la dernière sélection que j'ai employé sans succès :

h3 li:first-child	
	{
		color: khaki;
	}

Un peu de lumière, ça serait généreux de votre part. Des exemples, c'est plus parlant pour moi, mais c'est à votre guise.

Merci, à l'avance !

Salut,

Quelles "4 listes" ? Il y en a 5 dans le html.

Sinon, ton code cherche un <li> qui se trouverait dans un <h3>, évidemment que ça ne marche pas.

li:first-child { }

rhooManu a écrit:

Salut,

Quelles "4 listes" ? Il y en a 5 dans le html.

Sinon, ton code cherche un <li> qui se trouverait dans un <h3>, évidemment que ça ne marche pas.

li:first-child { }

Bonsoir,

Merci pour ce retour qui m'a permis de presque atteindre mon objectif. Quand, on regarde cette photo :

... il y a apparemment un problème pour "Aventages" qui sélectionne tous les éléments de sa liste et non seulement le premier !

  Mais, ça défriche de beaucoup le terrain luxuriant devant moi. Merci encore !  

Édition  quelque temps plus tard....

ALors, je viens trouver finalement par moi-même grâce à rhooManu !

Il fallait que je sélectionne comme ceci : 

ul > li:first-child 

Merci et bonne nuit ! Je vais clore ce sujet...

-
Edité par Philousk 14 janvier 2019 à 6:20:18

Mais avec ce dernier code, tu ne sélectionnes que 3 listes

N'oublie pas les deux autres. (et tu y es presque !)

Raaaah  merci.... je croyais être en affaire ! 

Bon là, mon dernier code amélioré, sans y parvenir totalement :

aside ol ul li:first-child 

Entre aside et ol, j'ai essayé ~, l'espace, + et aussi la ,  mais rien n'y fait.

Un indice s.v.p ?

Tu as droit à deux sélecteurs, tu disais Sers-t'en.

Re-bonjour Lamecarlate ou toutes autres bonnes gens ! (Vous voyez je fais des efforts )

Je travaille avec ces sélecteurs là : 

Tous les éléments d'une page: *
Le premier élément avec id="elem": #elem
Tous les éléments avec class="maclasse": .maclasse
Tous les p avec class="maclasse": p.maclasse
Tous les p: p
Tous les div et tous les p: div, p
Tous les p enfants d'un div: div > p
Tous les p descendants d'un div: div p
Tous les p précédés d'un div: div ~ p
Tous les p précédés immdiatement d'un div: div + p
Tous les p qui ont l'attribut id: p[id]

Je ne sais pas si je peux réaliser ça parmi ceux là ou s'il existe une autre liste.

Merci encore pour votre aide inestimable !

Résumons : tu as 5 listes. Elles sont de deux types différents. Tu sais comment cibler un des deux types. Maintenant il faut juste faire quelque chose de semblable pour cibler l'autre type de liste. Pour moi, avec ce que tu as produit en avant-dernier (avant nos remarques à rhooManu et moi-même) est très bien, faut juste aller un poil plus loin.

D'abord, encore merci pour le support...

Brièvement, car un rdv m'attend.

ok... Tu parles de ol et ul ?

Avant ce dernier conseil, mon dernier et meilleur résultat est comme ceci...

aside li:first-child	/* à vérifier*/
	{
		color: khaki;
	}

J'ai testé ça aussi... mais non.

 ol > ul > li:first-child

ul > li:first-child

c'est très bien.

Maintenant il faut l'appliquer à l'autre type de listes

Mais pas le droit d'utiliser "," donc il faut ruser.

Bonsoir,

Je ne sais pas si c'est comme ça tu voyais ça :

ul > li:first-child	/* à vérifier*/
	{
		color: khaki;
	}
	
ol > li:first-child	/* à vérifier*/
	{
		color: khaki;
	}	
	

mais, ça donne exactement comme ma dernière photo... 

Lumière, lumière où es-tu ?

ul li:first-child	/* à vérifier*/
	{
		color: khaki;
	}

ol > li > h3
	{
		color: khaki;
	}

Edition 1h plus tard...

Tonnerre de bresk ! Enfin...

À moins encore d'une autre objection, puis-je marqué le sujet comme résolu ?

Merci pour votre patience sinon...

-
Edité par Philousk 15 janvier 2019 à 2:29:51

Bin moi j'aurais mis comme toi

ul > li:first-child  /* à vérifier*/
    {
        color: khaki;
    }
     
ol > li:first-child  /* à vérifier*/
    {
        color: khaki;
    } 

parce que ça sélectionne effectivement le premier élément de chaque liste.

Ton dernier résultat correspond plus visuellement mais pas sémantiquement selon moi. Faudra voir avec tes profs, ou bien la correction de l'exercice.

-
Edité par Lamecarlate 15 janvier 2019 à 6:42:28

ol * > li:first-child { }

Plutôt comme ça en fait, sinon avec ton exemple ça va aussi cibler le premier <li> du <ol> "global" (voir https://jsfiddle.net/1vqf2jag/).

Alors que là : https://jsfiddle.net/1vqf2jag/1/ 

Et comme ça, pas besoin de dupliquer du code.

-
Edité par EmmanuelBeziat 15 janvier 2019 à 17:05:23

Réponse à rhooManu...

Salut !

Humm, bizarre !

Ton premier code ne donne pas le même résultat que le miens, voir ma photo sous les 2 émoticons... Et si je ne m'abuse est : mettre le premier item de chacune des listes de couleur khaki.....

Moi, avec la liste globale comme tu dis, il y a vraiment 5 listes.

Mais, là je sais pourquoi il y a une différence entre nous 2,  mon dernier code édité est :

ul li:first-child	
	{
		color: khaki;
	}

aside > ol > li > h3
	{
		color: khaki;
	}

-
Edité par Philousk 15 janvier 2019 à 18:44:00

Je parlais du code de Lamecarlate. Ceci dit, ton CSS ne fait pas vraiment sens, pourquoi cibler le h3 ? Ton objectif est de cibler les premiers éléments de liste, pas les h3.

> Je parlais du code de Lamecarlate.

Bin on n'avait pas droit à la virgule, donc on doit forcément dupliquer :/

Ben non, cf. ma réponse

En faisant ton exemple :

ul > li:first-child  /* à vérifier*/
    {
        color: khaki;
    }
      
ol > li:first-child  /* à vérifier*/
    {
        color: khaki;
    }

On cible "trop" : https://jsfiddle.net/1vqf2jag/ Tout le premier élément de la liste "globale" est sélectionné (et à moins que ce ne soit un piège, ça ne doit pas)

Alors qu'avec ça :

ol * > li:first-child {
    color: khaki;
}

On s'assure de cibler n'importe quel premier <li> en une seule fois, peu importe qu'il s'agisse d'un <ol> ou <ul>, mais en excluant le <ol> "global" : https://jsfiddle.net/1vqf2jag/1/ 

-
Edité par EmmanuelBeziat 16 janvier 2019 à 17:34:07

Comme l'énoncé est de toute façon peu clair (4 listes alors qu'il y en a 5), je ne saurais pas argumenter.

Allo !

En fait l'énoncé était ceci :

• on désire mettre certaines parties de la liste en évidence :

o vous devez le faire en n’utilisant que 2 styles (sans l’opérateur « , »);

o vous pouvez utiliser les opérateurs complexes;

o mettre le premier item de chacune des listes de couleur khaki;

• lorsque le pointeur passe sur un item d’une liste non ordonnée, on veut que ce dernier prenne le

formatage suivant :

o le texte devient de couleur lightgray;

o l’item est souligné;

o il y a une lueur orange de 20px qui émane de l’item sous le pointeur.

ET moi, j'ai fait ça : 

ul li:first-child	
	{
		color: khaki;
	}

aside > ol > li > h3
	{
		color: khaki;
	}
	

aside  ul > li:hover 
	{
		color: lightgray;
		text-decoration: underline;
		text-shadow: 0 0 20px #FFA500;	
	}

Et voici une image de l'énoncé PDF du résultat attendu :

Merci pour l'image de l'énoncé : c'est ça que j'attendais et du coup, oui, ton code ou celui de rhooManu est plus pertinent que mes propositions. (je maintiens que l'énoncé textuel n'est pas clair, mais je suis reloue, faites pas attention)

Je suis d'accord, c'est loin d'être clair (et d'être un cas pratique réaliste). Mais c'est déjà plus compréhensible avec une image.