Css lien pour un titre

tomtom74100 -  
 tomtom74100 -
bonjour,

J'ai appliqué à tout mes lien dans mon site des valeurs de couleur avec le .a:link; a:visited et a:hover.

Seulement j'aimerai que mon titre qui est aussi un lien soit different de ces valeurs là ( en couleur, font etc...)

j'ai essayé d'appliquer une class=, de le styliser en Css avec !important; mais rien ne fonctionne.

voici mon code html:
<div id="titrelogo" style="margin-left: 41%; position: absolute; top: 25px; z-index: 2;">
<i class="fa fa-plane" aria-hidden="true" style="color: #F5D138; font-size: 28px"></i> 
<span style="font-family: 'Montserrat Alternates' sans-serif; font-size: 30px;color: #F5D138 !important;"><a href="http://www.youtube.com/"><b>nouveaudépart</b></a></span>
</div>


et voici mon css:
<!---Logo Titre----->

a.titrelogo{
color: #F5D138 !important;
font-weight: 700;
font-size: 30px;
letter-spacing: -1px;"
text-decoration-line:none;
border-bottom: dashed 3px #F5D138;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
}

a.titrelogo:hover{
text-decoration:none;
color: #7F7F7F;
}


j'aimerai garder mes valeurs pour tout les autres lien sans rien changer et juste pouvoir changer celui là. je ne suis pas assez bon. pouvez vous m'aider?

3 réponses

  1. Pitet Messages postés 2845 Statut Membre 530
     
    Salut,

    Le sélecteur css "a.titrelogo" correspond à "la balise <a> dont la class est titrelogo", or ta balise <a> ne contient pas de classe et titrelogo est l'identifiant du div.

    Donc si tu veux conserver ton identifiant, il faut utiliser le sélecteur suivant :
    #titrelogo a
    -> "la balise <a> dans l'élément dont l'identifiant est titrelogo"

    Sinon tu peux simplement ajouter une classe à ta balise <a> :
    <div id="titrelogo" style="margin-left: 41%; position: absolute; top: 25px; z-index: 2;">
    <i class="fa fa-plane" aria-hidden="true" style="color: #F5D138;  font-size: 28px"></i> 
    <span style="font-family: 'Montserrat Alternates' sans-serif; font-size: 30px;color: #F5D138 !important;"><a href="http://www.youtube.com/" class="logolink"><b>nouveaudépart</b></a></span>
    </div>
    et cibler la balise via cette classe :
    .logolink


    Bonne journée,
    0
    1. tomtom74100
       
      Pitet, merci d'avoir pris le temps de répondre ! ça a marché et j'ai compris quelque chose. bonne journée !
      0
  2. tomtom74100
     
    et du coup comment appliquer un hover la dessus?
    ceci ne marche pas:
    #logolink:hover{
    text-decoration:none;
    color: #7F7F7F !important;
    0
    1. Pitet Messages postés 2845 Statut Membre 530
       
      #logolink -> l'élément dont la l'identifiant est logolink
      .logolink -> l'élément dont la classe est logolink

      As tu appliqué un id ou une classe sur la balise <a> ? Pour du css, on recommande plutôt d'utiliser des classes :
      <a href="http://www.youtube.com/" class="logolink"><b>nouveaudépart</b></a>

      .logolink {
          color: red;
      }
      
      .logolink:hover {
          color: green;
      }
      
      0
    2. tomtom74100
       
      ..logolink {
      font-family: 'Montserrat Alternates' sans-serif;
      font-size: 30px;
      color: #F5D138 !important;
      font-weight: 700;
      font-size: 30px;
      letter-spacing: -1px;"
      text-decoration-line:none;
      border-bottom: dashed 3px #F5D138;
      -webkit-transition: 0.3s;
      -moz-transition: 0.3s;
      -o-transition: 0.3s;
      -ms-transition: 0.3s;
      transition: 0.3s;
      {

      .logolink:hover {
      text-decoration:none;
      color: #999999 !important;
      }


      j'ai appliqué la class=logolink à ma balise <a> comme tu m'a dit, mais je n'ai toujours pas de :hover.
      0
    3. Pitet Messages postés 2845 Statut Membre 530
       
      Supprime l'utilisation des !important qui empêche ici le hover de surcharger le style par défaut. Le mot clé !important ne devrait idéalement jamais être utilisé.
      0
    4. tomtom74100
       
      je suis face a un dilemme parce que si j'enlève les !important; alors mon titre prend la valeur de .a:link{ .a:visited{ et .a:hover{ que j'ai defini pour tout mes autres liens. Je suis piégé?
      0
    5. Pitet Messages postés 2845 Statut Membre 530
       
      Un exemple : https://jsfiddle.net/69oheg4s/

      Montre nous tes codes si tu as encore des soucis.
      0
  3. tomtom74100
     
    Alors si je met des !importants après mes valeurs couleurs ça fonctionne.
    Si vous avez une meilleure idée je suis preneur.

    merci
    0