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 !

```
<style>
    a[aria-expanded="true"]  .fa-caret-up {
        display: none;
    }
    a[aria-expanded="false"] .fa-caret-down {
        display: none;
    }
</style>

<div class="container-fluid d-flex justify-content-center">
    <div class="row">

        <div class="col-lg-4 col-md-6 col-12 pb-5">
            <h4 class="text-center">eCampus</h4>

            <div class="d-flex justify-content-between align-items-center">
                <a href="#" data-toggle="collapse" data-target="#footer_ups" aria-expanded="false" aria-controls="footer_ups">
                    <span class="flex-grow-1 mr-5"><i class="fa fa-chevron-right pr-2"></i>Universit&eacute; Paris-Saclay</span>
                </a>
                <span class="badge badge-primary badge-pill">7 <i class="fa fa-caret-down"></i><i class="fa fa-caret-up"></i></span>
            </div>

            <div id="footer_ups" class="collapse pl-3" aria-labelledby="Établissements de l'Universit&eacute; Paris-Saclay">
                <ul class="list-unstyled">
                    <li><i class="fa fa-angle-right pr-2"></i> <a href="https://www.universite-paris-saclay.fr" alt="Site internet de l'Universit&eacute; Paris-Saclay" target="_blank">UPSaclay</a></li>   
                    <li><i class="fa fa-angle-right pr-2"></i> <a href="https://www.univ-evry.fr" alt="Site internet de l'Université d'Évry Val d’Essonne" target="_blank">UEVE</a></li>
                    <li><i class="fa fa-angle-right pr-2"></i> <a href="https://www.uvsq.fr" alt="Site internet de l'université de Versailles-Saint-Quentin-en-Yvelines" target="_blank">UVSQ</a></li>
                    <li><i class="fa fa-angle-right pr-2"></i> <a href="https://www.centralesupelec.fr" alt="Site internet de Centrale Sup&eacute;lec" target="_blank">Centrale Sup&eacute;le</a></li>
                    <li><i class="fa fa-angle-right pr-2"></i> <a href="https://ens-paris-saclay.fr" alt="Site internet de l'École Normale Supérieure" target="_blank">École Normale Supérieure</a></li>
                    <li><i class="fa fa-angle-right pr-2"></i> <a href="https://www.institutoptique.fr" alt="Site internet de l'Institut d'Optique Graduate School" target="_blank">Institut d'Optique</a></li>
                    <li><i class="fa fa-angle-right pr-2"></i> <a href="http://www2.agroparistech.fr" alt="Site internet de AgroParisTech" target="_blank">AgroParisTech</a></li>
                </ul>
            </div>

            <div class="d-flex justify-content-between align-items-center">
                <a href="#" class="text-nowrap pr-5" data-toggle="collapse" data-target="#footer_ipp" aria-expanded="false" aria-controls="footer_ipp">
                    <span><i class="fa fa-chevron-right pr-2"></i>Institut Polytechnique de Paris</span>
                </a>
                <span class="badge badge-primary badge-pill">4 <i class="footer_ipp_glyph fa fa-caret-down"></i></span>
            </div>

            <div id="footer_ipp" class="collapse pl-3" aria-labelledby="Établissements de l'Institut Polytechnique de Paris">
                <ul class="list-unstyled">
                    <li><i class="fa fa-angle-right pr-2"></i> <a href="https://www.ensta-paris.fr" alt="Site internet de ENSTA Paris" target="_blank">ENSTA</a></li>   
                    <li><i class="fa fa-angle-right pr-2"></i> <a href="http://www-instn.cea.fr" alt="Site internet de l'Institut national des sciences et techniques nucléaires" target="_blank">INSTN</a></li>
                    <li><i class="fa fa-angle-right pr-2"></i> <a href="https://www.telecom-paris.fr" alt="Site internet de Télécom Paris" target="_blank">Télécom Paris</a></li>
                    <li><i class="fa fa-angle-right pr-2"></i> <a href="https://www.telecom-evolution.fr" alt="Site internet de T&eacute;l&eacute;com Evolution" target="_blank">T&eacute;l&eacute;com Evolution</a></li>
                </ul>
            </div>

            <br />
            <i class="fa fa-chevron-right pr-2"></i><a href="https://www.universite-paris-saclay.fr/collaborations/international/loffre-de-lalliance-eugloh-pour-les-etudiants" target="_blank">Alliance EUGLOH pour les &eacute;tudiants</a>
        </div>

        <div class="col-lg-4 col-md-6 col-12 pb-4">
            <h4 class="text-center">Aide et Informations l&eacute;gales</h4>
            <ul class="list-unstyled">
                <li><i class="fa fa-chevron-right pr-2"></i><a href="https://multiweb2.univ-evry.fr/SupportEcampus/">Probl&egrave;mes de connexion</a></li> 
                <li><i class="fa fa-chevron-right pr-2"></i><a href="">Aide et accessibilit&eacute;</a></li>
                <li>&nbsp;<li>
                <li><i class="fa fa-chevron-right pr-2"></i><a href="">Conditions g&eacute;n&eacute;rales d'utilisation</a></li>    
                <li><i class="fa fa-chevron-right pr-2"></i><a href="">Cr&eacute;dits</a></li>  
                <li><i class="fa fa-chevron-right pr-2"></i><a href="">Mentions l&eacute;gales</a></li> 
                <li><i class="fa fa-chevron-right pr-2"></i><a href="/admin/tool/dataprivacy/summary.php">Politique de confidentialit&eacute;</a></li>  
                <li>&nbsp;<li>
                <li><i class="fa fa-chevron-right pr-2"></i><a href="https://www.openlms.net/open-lms-mobile-app/?utm_source=9rgh0ncHTl1wJMQhZbEpm5EfZrdmgA1Dmoodle20gm.mrooms.net&utm_campaign=mobilelink_admin" target="_blank">Obtenir l'app mobile</a></li>
            </ul>
        </div>

        <div class="col-lg-4 col-md-12 text-center">
            <h4 class="text-center">Suivez-nous</h4>

            <a href="https://www.facebook.com/UParisSaclay" alt="Facebook de l'Universit&eacute; Paris-Saclay" target="_blank"><i class="fa fa-facebook-square fa-3x mr-3"></i></a>
            <a href="https://twitter.com/UnivParisSaclay" alt="Twitter de l'Universit&eacute; Paris-Saclay" target="_blank"><i class="fa fa-twitter-square fa-3x mr-3"></i></a>
            <a href="https://www.linkedin.com/school/universit%C3%A9-paris-saclay/" alt="LinkedIn de l'Universit&eacute; Paris-Saclay" target="_blank"><i class="fa fa-linkedin-square fa-3x mr-3"></i></a>
            <a href="https://www.instagram.com/universite_paris_saclay/" alt="Instagram de l'Universit&eacute; Paris-Saclay" target="_blank"><i class="fa fa-instagram fa-3x"></i></a>
        </div>

    </div>
</div>

```