Target specific element in CSS?

Question

Happy morning everyone,

I don't manage to target .fa-caret-down or up (inside a i and span) with the a[aria-expanded=true] which share the same div parent, do you know how to do it ?

I try with the selector ~, or to move the fa-caret-up (and succeed), but you are really good here, so here a light version of the code if you can find a solution.

Thanks !




    
    
        
            eCampus
            
            
                
                    Université Paris-Saclay
                
                7 
            
            
            
                
                     UPSaclay   
                     UEVE
                     UVSQ
                     Centrale Supéle
                     École Normale Supérieure
                     Institut d'Optique
                     AgroParisTech
                
            
            
            
                
                    Institut Polytechnique de Paris
                
                4 
            
            
            
                
                     ENSTA   
                     INSTN
                     Télécom Paris
                     Télécom Evolution
                
            
            
            

            Alliance EUGLOH pour les étudiants
        
        
        
        
            Aide et Informations légales
            
                Problèmes de connexion 
                Aide et accessibilité
                 

                
Conditions générales d'utilisation    
                Crédits  
                Mentions légales 
                Politique de confidentialité  
                 

                
Obtenir l'app mobile
            
        
        
        
            Suivez-nous

Kunal Tanwar · Accepted Answer

If you want to make caret up and down animation you can use little JS

const caret = document.querySelector('.caret');

caret.addEventListener('click', (e) => {
  e.preventDefault();
  caret.classList.toggle('collapsed');

  if (caret.classList.contains('collapsed')) {
    caret.setAttribute("aria-expanded", "true");
  } else {
    caret.setAttribute("aria-expanded", "false");
  }

  console.log(caret.getAttribute('aria-expanded'))
});

* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: grid;
  place-items: center;
}

.caret {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  border-radius: 0.25rem;
  border: 1px solid #e5e5e5;
}

.caret svg {
  width: 64px;
  height: 64px;
  transition: transform 250ms ease;
}

.caret.collapsed svg {
  transform: rotate(180deg);
}

Target specific element in CSS?

Answers (2)

Related Questions