[Résolu] Appliquer une classe à un <li>

Bonjour,
Je tente de faire une transition sur un li, mais cela ne fonctionne pas.
Là où il n'y a pas de classe, la transition se fait.
Mon HTML :

<div class="article">
<ul id= "textasiat2" >
<li><a href="#">ce lien sera</a></li>
 <li><a href="#">Ce lien sera</a></li>
<li class="designer">nouveau style</a></li>
<li><a href="#">nouveau style</a></li>
</ul>
<img class="imagasiat" src="images/asiat.jpeg" alt="asiat">  </div>

Et mes CSS :

.designer {
color:white;
 text-shadow: 2px 2px 4px #000000;
font-size:8vw;
line-height:8vw;
}designer li a{
-webkit-transition: color 2s, font-size 2s;
-moz-transition: color 2s, font-size 2s;
-o-transition: color 2s, font-size 2s;
 transition: color 2s, font-size 2s;}
	
.designer li a :hover {
font-size: 20vw;
color: 	#FAFAD2;
}

#textasiat2{
	padding: 0;
	margin-left: 50px;
	position: absolute;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	text-align: left;
	float: left;
	z-index: 99999;
	font-size: 8vw;
	line-height: 8vw;}



#textasiat li a {
	color:white;
	 text-shadow: 2px 2px 4px #000000;
         text-decoration: none;
        ]z-index: 99;

	
}
#textasiat li a:hover {
  color: 	#FAFAD2;
}
ul {list-style:none;}

J'aimerais reproduire l'effet "#textasiat li a" sur ."designer li "a car je souhaite changer le style.

Merci pour votre aide,

P.

Salut,

Alors il y a pas mal d'erreur.

Pour commencer il manque une ouverture de <a> avec la classe designer (ou supprimer la fermeture du a si tu veux pas le <a>. Il manque aussi un point dans le CSS.

y'a un crochet qui traine..

     ]z-index: 99;

Colle ca dans un fiddle il te mettre tes erreurs en rouge et en jaune : https://jsfiddle.net/gw42mxsu/

Faut vraiment partir sur une base saine. Aide toi d'outil de coloration syntaxique et indente ton code. Si t'as rien jsFiddle le fait automatiquement (petit boutton "tidy" dans les coins haut droite des fenêtres)

Ensuite le :hover doit etre collé au a si tu veux capter le survol du a :

.designer li a:hover {

et non

.designer li a :hover {

Idem pour .designer li ca n'existe pas dans ton html :

<li class="designer">

Ici ca sera li.designer, le li n'est pas fils d'un élément qui a la class designer.

Ca fait beaucoup d'erreur. Corrige déjà tout ca et on verra si il y a toujours des soucis

Un énorme merci pour ces précisions. J'en apprends tous les jours
Maintenant ça fonctionne avec cette ligne :

<li class="designer"><a href="#">nouveau style</a></li>

Bonne journée et encore merci

Bouhouhohuophuhohi,
La li class="designer"class sur la ligne HTML ne prend en compte que le margin-top ((

.designer {color:white;
text-shadow: 2px 2px 4px #000000;
font-size:4vw;
line-height:4vw;
margin-top: 2em;
}
.designer li a{
-webkit-transition: color 2s, font-size 2s;
-moz-transition: color 2s, font-size 2s;
-o-transition: color 2s, font-size 2s;
 transition: color 2s, font-size 2s;}
	
.designer li a:hover {
font-size: 20vw;
color: 	#FAFAD2;
}

PLGPPUR a écrit :
Bouhouhohuophuhohi,
La li class="designer"class sur la ligne HTML ne prend en compte que le margin-top

Bah non... https://jsfiddle.net/9pazqxfs/

Il prend bien tout en compte (même la couleur, regarde la puce du <li> est blanche), il reste seulement la couleur bleue car elle est sur le <a> pas le <li>
Modifié par _laurent (02 Feb 2023 - 14:51)

Merci _laurent. Effectivement ça fonctionne
Mais c'est la div "textasiat2" qui chamboule tout (qui prend le dessus)

#textasiat2{
	padding: 0;
	margin-left: 50px;
	position: absolute;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	text-align: left;
	float: left;
	z-index: 99999;
	font-size: 8vw;
	line-height: 8vw;}
	
	#textasiat2 li a{
    font-size:8vw;
	line-height:8vw;
	color:white;
	      text-shadow: 2px 2px 4px #000000;

    
    -webkit-transition: color 2s, font-size 2s;
       -moz-transition: color 2s, font-size 2s;
         -o-transition: color 2s, font-size 2s;
            transition: color 2s, font-size 2s;
}

	
	#textasiat2 li a:hover {
    font-size: 20vw;
    color: 	#FAFAD2;
	}

Merci

Tout ce code :

#textasiat2{
	padding: 0;
	margin-left: 50px;
	position: absolute;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	text-align: left;
	float: left;
	z-index: 99999;
	font-size: 8vw;
	line-height: 8vw;}
	
	#textasiat2 li a{
    font-size:8vw;
	line-height:8vw;
	color:white;
	      text-shadow: 2px 2px 4px #000000;

    
    -webkit-transition: color 2s, font-size 2s;
       -moz-transition: color 2s, font-size 2s;
         -o-transition: color 2s, font-size 2s;
            transition: color 2s, font-size 2s;
}

	
	#textasiat2 li a:hover {
    font-size: 20vw;
    color: 	#FAFAD2;
	}

N'a aucune influence sur ce code ci :

.designer {color:
white;
text-shadow: 2px 2px 4px 
#000000;
font-size:4vw;
line-height:4vw;
margin-top: 2em;
}

Du coup je vois pas trop de quoi tu parles.
Si tu parle du style du <a> alors oui il vient par dessus les style hérité de son parent designer.

La il va falloir reprendre un cours de poids de sélecteur https://developer.mozilla.org/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance

Il va falloir cleaner tout ca de façon a ce que tes selecteurs soit simples et facilement overidables comme ce que tu cherche a faire avec l'ajout de la classe designer.

#textasiat2 est un poids très fort dans un sélecteur mais il n'est pas présent dans ton selecteur qui doit overider donc .designer ne peut pas s'imposer.

En gros ca devrait ressembler à ca ton CSS

#textasiat2 { }
    #textasiat2 li { }
        #textasiat2 li a { }
    #textasiat2 li.designer { }
        #textasiat2 li.designer a { }

Merci pour ces explications et les cours à suivre (mais mon anglais laisse à désirer
Donc, cela devrait me donner ça ?

 #textasiat2{
	padding: 0;
	margin-left: 50px;
	position: absolute;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	text-align: left;
	float: left;
	z-index: 99999;
	font-size: 8vw;
	line-height: 8vw;}
	
	#textasiat2 li{
    font-size:8vw;
	line-height:8vw;
	color:white;
	      text-shadow: 2px 2px 4px #000000;

}
	

#textasiat2 li a{
    font-size:84w;
	line-height:8vw;
	color:white;
	      text-shadow: 2px 2px 4px #000000;

    
    -webkit-transition: color 2s, font-size 2s;
       -moz-transition: color 2s, font-size 2s;
         -o-transition: color 2s, font-size 2s;
            transition: color 2s, font-size 2s;
}

#textasiat2 li a:hover {
    font-size: 20vw;
    color: 	#FAFAD2;
	}
		
	
	
	
#textasiat2 li .designer li {	color:red;
	      text-shadow: 2px 2px 4px #000000;
	    font-size:4vw !important;

}

#textasiat2 .designer li a{	color:red;
	    font-size:4vw !important;
	line-height:4vw !important;
	
    
    -webkit-transition: color 2s, font-size 2s;
       -moz-transition: color 2s, font-size 2s;
         -o-transition: color 2s, font-size 2s;
            transition: color 2s, font-size 2s;}
	

.designer li a:hover {
    font-size: 80vw;
    color: 	#FAFAD2;
	}

#textasiat2 prend toujours le dessus

Je suis encore passé à côté de qq chose

Bonne soirée

Je suis perdu, je n'arrive plus à rien. J'utilise "tab-it" pour indenter le code mais le résultat est très aléatoire.
Si j'ai bien (mais mal car ça fonctionne pas), le HTML devrait être ça :

<div class="article">
	<ul id= "textasiat2" >
		<li><a href="#">ce lien sera</a></li>
		<li><a href="#">Ce lien sera</a></li>
		<ul id= "textasiat2 li .designer li" >
			<li><a href="#">nouveau style</a></li>
			<li><a href="#">nouveau style</a></li>
		</ul>
		<img class="imagasiat" src="images/asiat.jpeg" alt="asiat">
	</div>

Il faut que je vois pour les CSS, je ne sais plus. Je ne comprends plus rien au B.A.BA pour la 1re fois

Il manque un </ul>
C'est bien indenté et ca se voit direct. le <ul> est au même niveau que </div> c'est qu'il y a un soucis.

Et qu'estt-ce que c'est que ça :

id= "textasiat2 li .designer li"

Depuis quand on mets des sélecteur CSS dans les id html ?!

Tu ne corriges pas ce que je dis et tu rajoutes des erreurs... je comprends rien a ce que tu fais...
Modifié par _laurent (02 Feb 2023 - 22:15)

Bonsoir _laurent,
J'apprends le code pendant mes heures de travail... pendant que mes collègues font des pauses clopes. Là, c'est trop pointu pour moi, pour quelque chose que j'aurais parié très simple. il va falloir que j'y consacre un week-end. Pas le prochain mais le suivant.
Merci pour toutes tes remarques, ton aide, ta sympathie et ta disponibilité.
Bonne soirée et merci à toi
P.

Bonjour _laurent,
Après reflexion (il m'en faut beaucoup), voici le code qui fonctionne
CSS :

#textasiat
{
	padding: 0;
	height: auto;
	bottom: auto;
	margin-top: 50px;
	margin-left: 50px;
	position: absolute;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	text-align: left;
	text-decoration: none;
	float: left;
	z-index: 99999;
	font-size: 8vw;
	line-height: 8vw;
}

#textasiat li a
{
	color:white;
	text-shadow: 2px 2px 4px #000000;
	text-decoration: none;
	z-index: 99;
}

#textasiat li a:hover
{
	color: #abbbae;
}

#textasiat2
{
	padding: 0;
	margin-left: 50px;
	position: absolute;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	text-align: left;
	float: left;
	z-index: 99999;
	font-size: 8vw;
	line-height: 8vw;
}

#textasiat2 li
{
	font-size:8vw;
	line-height:8vw;
	color: white;
	text-shadow: 2px 2px 4px #000000;
}

#textasiat2 li a
{
	font-size:8vw;
	line-height:8vw;
	color: white;
	text-shadow: 2px 2px 4px #000000;
	-webkit-transition: color 2s, font-size 2s;
	-moz-transition: color 2s, font-size 2s;
	-o-transition: color 2s, font-size 2s;
	transition: color 2s, font-size 2s;
}

#textasiat2 li a:hover
{
	font-size:20vw;
}

#textasiat2 li.designer
{
	font-size: 4vw;
	color: #abbbae;
	-webkit-transition: color 2s, font-size 2s;
	-moz-transition: color 2s, font-size 2s;
	-o-transition: color 2s, font-size 2s;
	transition: color 2s, font-size 2s;
}

#textasiat2 li.designer:hover
{
	font-size: 10vw;
	color: #abbbae;
}

Et le HTML :

													<div class="article">
														<ul id= "textasiat2" >
															<li><a href="#">ce lien sera</a></li>
															<li><a href="#">Ce lien sera</a></li>
															<li class="designer">nouveau style</li>
															<li><a href="#">nouveau style</a></li>
														</ul>
														<img class="imagasiat" src="images/asiat.jpeg" alt="asiat">
													</div>

Des corrections ? Désolé pour l'indentation du code made in "tab-it".
Merci pour tout et bon week-end
P.