Целевой конкретный элемент в CSS?

ProgramBox

Целевой конкретный элемент в CSS?

Post author:admin
Запись опубликована:10 января, 2022
Post category:Вопросы по программированию

#css #css-selectors

Вопрос:

Всем счастливого утра,

Мне не удается настроить таргетинг .fa-каретку вниз или вверх (внутри i и span) с помощью a[aria-expanded=true], у которых один и тот же родитель div, вы знаете, как это сделать ?

Я пытаюсь использовать селектор ~ или переместить каретку вверх (и преуспеваю), но вы действительно хороши здесь, так что вот облегченная версия кода, если вы можете найти решение.

Спасибо!

 <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>Universitamp;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'Universitamp;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'Universitamp;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 Supamp;eacute;lec" target="_blank">Centrale Supamp;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 Tamp;eacute;lamp;eacute;com Evolution" target="_blank">Tamp;eacute;lamp;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 amp;eacute;tudiants</a>
        </div>
        
        
        <div class="col-lg-4 col-md-6 col-12 pb-4">
            <h4 class="text-center">Aide et Informations lamp;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/">Problamp;egrave;mes de connexion</a></li> 
                <li><i class="fa fa-chevron-right pr-2"></i><a href="">Aide et accessibilitamp;eacute;</a></li>
                <li>amp;nbsp;<li>
                <li><i class="fa fa-chevron-right pr-2"></i><a href="">Conditions gamp;eacute;namp;eacute;rales d'utilisation</a></li>    
                <li><i class="fa fa-chevron-right pr-2"></i><a href="">Cramp;eacute;dits</a></li>  
                <li><i class="fa fa-chevron-right pr-2"></i><a href="">Mentions lamp;eacute;gales</a></li> 
                <li><i class="fa fa-chevron-right pr-2"></i><a href="/admin/tool/dataprivacy/summary.php">Politique de confidentialitamp;eacute;</a></li>  
                <li>amp;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.netamp;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'Universitamp;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'Universitamp;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é-paris-saclay/" alt="LinkedIn de l'Universitamp;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'Universitamp;eacute; Paris-Saclay" target="_blank"><i class="fa fa-instagram fa-3x"></i></a>
        </div>
        
    </div>
</div>

1. добавьте значение true в строку, т. е. a[aria-expanded="true"]

2. Здравствуйте, добавил некоторую информацию, потому что у меня есть как fa-каретка-вниз, так и вверх. И попробуйте скрыть один из них с помощью css, но когда я скрываю/показываю свернутый элемент, вместо одного отображаются оба каретки. Спасибо!

3. Как сказал @KunalTanwar, вы должны превратить «a[aria-expanded=false]` в» a[aria-expanded=»false»]`

4. теги вокруг ваших стилей должны быть style тегами…

5. Привет, биберман, да, извините за тег сценария/стиля, он находится во внешнем CSS, поэтому мой сайт использует его. Ариарт и Кунал, даже добавили «», похоже, не писали 🙁

Ответ №1:

Если вы хотите сделать анимацию каретки вверх и вниз, вы можете использовать немного 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>

Ответ №2:

Вы должны сначала выбрать родного брата, а затем i теги, если хотите использовать общий селектор родных братьев ( ~ ). Например:

 a[aria-expanded="true"] ~ span .fa-caret-up {...}

Рабочий пример:

 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> <a href="https://" alt="Site internet" target="_blank">Website</a></li>
        </ul>
      </div>

    </div>

  </div>
</div>

1. Спасибо! Все еще не работает, но ваш фрагмент кода работал, так что я думаю, что CMS что-то напутала. Хорошего вам дня и еще раз спасибо !! ПРАВКА : CMS действительно испортил код, спасибо вам всем !!

2. двойные кавычки не нужны

3. Действительно, в двойных кавычках нет необходимости, они все еще работают. И, как все замечают, нам нужно отключить true/false, так лучше XD, Но мы ждали, чтобы у нас был рабочий код для решения этой проблемы. Еще раз спасибо !!

Метки: Целевой конкретный элемент в CSS?