Target specific element in CSS? - 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 !
<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é 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é Paris-Saclay">
<ul class="list-unstyled">
<li><i class="fa fa-angle-right pr-2"></i> UPSaclay</li>
<li><i class="fa fa-angle-right pr-2"></i> UEVE</li>
<li><i class="fa fa-angle-right pr-2"></i> UVSQ</li>
<li><i class="fa fa-angle-right pr-2"></i> Centrale Supéle</li>
<li><i class="fa fa-angle-right pr-2"></i> École Normale Supérieure</li>
<li><i class="fa fa-angle-right pr-2"></i> Institut d'Optique</li>
<li><i class="fa fa-angle-right pr-2"></i> AgroParisTech</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> ENSTA</li>
<li><i class="fa fa-angle-right pr-2"></i> INSTN</li>
<li><i class="fa fa-angle-right pr-2"></i> Télécom Paris</li>
<li><i class="fa fa-angle-right pr-2"></i> Télécom Evolution</li>
</ul>
</div>
<br />
<i class="fa fa-chevron-right pr-2"></i>Alliance EUGLOH pour les étudiants
</div>
<div class="col-lg-4 col-md-6 col-12 pb-4">
<h4 class="text-center">Aide et Informations légales</h4>
<ul class="list-unstyled">
<li><i class="fa fa-chevron-right pr-2"></i>Problèmes de connexion</li>
<li><i class="fa fa-chevron-right pr-2"></i>Aide et accessibilité</li>
<li> <li>
<li><i class="fa fa-chevron-right pr-2"></i>Conditions générales d'utilisation</li>
<li><i class="fa fa-chevron-right pr-2"></i>Crédits</li>
<li><i class="fa fa-chevron-right pr-2"></i>Mentions légales</li>
<li><i class="fa fa-chevron-right pr-2"></i>Politique de confidentialité</li>
<li> <li>
<li><i class="fa fa-chevron-right pr-2"></i>Obtenir l'app mobile</li>
</ul>
</div>
<div class="col-lg-4 col-md-12 text-center">
<h4 class="text-center">Suivez-nous</h4>
<i class="fa fa-facebook-square fa-3x mr-3"></i>
<i class="fa fa-twitter-square fa-3x mr-3"></i>
<i class="fa fa-linkedin-square fa-3x mr-3"></i>
<i class="fa fa-instagram fa-3x"></i>
</div>
</div>
</div>

Answer 1

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);
}
<a href="#" class="caret" aria-expanded="false">
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="m11.998 17 7-8h-14z"></path>
</svg>
</a>

Answer 2

You have to select the sibling first and then the i tags if you want to use the general sibling selector (~). For example:
a[aria-expanded="true"] ~ span .fa-caret-up {...}
Working example:
a[aria-expanded=true] ~ span .fa-caret-up {
display: none;
}
a[aria-expanded=false] ~ span .fa-caret-down {
display: none;
}
<script src="https://kit.fontawesome.com/79efab5353.js" crossorigin="anonymous"></script>
<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">Moodle</h4>
<div class="d-flex justify-content-between align-items-center mr-5">
<a href="#" data-toggle="collapse" data-target="#footer_ups" aria-expanded="false" aria-controls="footer_ups">
<span class="flex-grow-1"><i class="fa fa-chevron-right pr-2"></i>Uni</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">
<ul class="list-unstyled">
<li><i class="fa fa-angle-right pr-2"></i> Website</li>
</ul>
</div>
</div>
</div>
</div>