Jak zmienić kolory elementów <ul>?

pytanie zadane 27 września 2020 w HTML i CSS przez Kubs Mądrala (5,190 p.)

Witajcie,

chcę w <ul> zawrzeć dwa tagi - jeden z nich nie będzie można kliknać (nr telefonu), a drugi będzie można (adres e-mail).

Stworzyłem coś takiego

<ul class="navigation__list">
   <p>tel. 123 456 789</p>
    <li class="navigation__item"><a style="text-decoration:none"        href="">test@gmail.com</a></li>

i zastanawiam się:

- czy w <ul> można umieścić tag

- jak zmienić kolor tych dwóch elementów w css na ten sam

2 odpowiedzi

odpowiedź 27 września 2020 przez ScriptyChris Mędrzec (190,190 p.)

- czy w <ul> można umieścić tag

Nie. Cytat dozwolonej zawartości w <ul> ze specki:

Content model:

Zero or more li and script-supporting elements.

- jak zmienić kolor tych dwóch elementów w css na ten sam

Jeśli chcesz w taki sam sposób ostylować więcej niż jeden element, to nadaj im tę samą klasę lub użyj selektora listy.

Pokaż 7 poprzednich komentarzy

komentarz 27 września 2020 przez Kubs Mądrala (5,190 p.)

<div class="navigation">
  <ul class="navigation__list">
    <p class="navigation__item"> tel. 123 456 789</p>
      <li class="navigation__item"><a href="">test@gmail.com
  </ul>
</div>

I teraz chcę mieć możliwość zmienienia rozmiaru fontu oraz koloru jednocześnie tych dwóch tagów z elementu <ul> I dodatkowo wyłączenia tego kursora na numer tel.

komentarz 27 września 2020 przez ScriptyChris Mędrzec (190,190 p.)

Skoro nadałeś tę samą klasę navigation__item elementom i <li>, to po prostu ją ostyluj w CSS. W czym tu jest problem? Aby wyłączyć obsługę kursora tylko elementowi , możesz nadać mu osobną klasę lub zastosować selektor p.nav__item.

Tylko dlaczego jest bezpośrednio wewnątrz <ul>, a nie w <li>? Poza tym masz niedomknięte tagi <a> oraz <li>.

komentarz 28 września 2020 przez Kubs Mądrala (5,190 p.)
edycja 28 września 2020 przez Kubs

<div class="navigation">
  <ul class="navigation__list">
    <li><p class="navigation__item"> tel. 123 456 789</p>
    </li>
      <li class="navigation__item"><a href="">test@gmail.com</a></li>
  </ul>
</div>

No właśnie jeśli dam :

.navigation__item {
  color: #23e22de0;
  text-decoration: none;
  
}

to nie styluje się żaden z tych elementów.

A jeśli dam

.navigation__list {
  list-style: none;
  margin-top: 60px;
  font-size: 20px;
}

to jedynie font-size działa na adresie e-mail

Próbuję też

.navigation__list li + p {
  color: #23e22de0;
  
}

ale zmiana koloru taga nie działa.

komentarz 28 września 2020 przez ScriptyChris Mędrzec (190,190 p.)

<div class="navigation">
  <ul class="navigation__list">
     <li class="navigation__item">
       <p> tel. 123 456 789</p>
     </li>

     <li class="navigation__item">
        <a href="">test@gmail.com</a>
     </li>
  </ul>
</div>

.navigation__item a,
.navigation__item p {
  color: #23e22de0;
  text-decoration: none;   
}

.navigation__item p {
  pointer-events: none;
}

komentarz 28 września 2020 przez Kubs Mądrala (5,190 p.)

Uff, super. Dziękuję.

odpowiedź 28 września 2020 przez VBService Ekspert (255,840 p.)

<style>
  :root {
    --color-list-item: orange;
  }
  .navigation__list {
    list-style: none;
    margin-top: 60px;
    font-size: 20px;
    pointer-events: none;
    color: var(--color-list-item);
  }
  .navigation__list a {
    text-decoration: none;
    pointer-events: auto;
    color: var(--color-list-item);
  }
</style>
<body>
  <div class="navigation">
    <ul class="navigation__list">
      <li class="navigation__item">tel. 123 456 789</li>
      <li class="navigation__item"><a href="">test@gmail.com</a></li>
    </ul>
  </div>
</body>

CodePen

komentarz 28 września 2020 przez Kubs Mądrala (5,190 p.)

<div class="navigation">
  <ul class="navigation__list">
    <li><p class="navigation__item"> tel. 123 456 789</p>
    </li>
      <li class="navigation__item"><a href="">test@gmail.com</a></li>
  </ul>
</div>

I adekwatnie:

:root {
  --color-list-item: orange;
}
.navigation__list {
  list-style: none;
  margin-top: 60px;
  font-size: 20px;
  text-decoration: none;
  color: var(--color-list-item);
}

i nic się nie dzieję - nie działa zmiana koloru ani text-decoration: none.

komentarz 28 września 2020 przez VBService Ekspert (255,840 p.)

Musi wskazać jeszcze element <a> i :.navigation__list { ... } --> .navigation__list a i navigation__list p

.navigation__item a,
.navigation__item p {
   ...  
}

1	komentarz 28 września 2020 przez Kubs Mądrala (5,190 p.) Tak, już gotowe. Dzięki serdeczne za odpowiedzi.

Podobne pytania

0 głosów

3 odpowiedzi 1,169 wizyt

Jaki jest wzór css na przesuwanie elementu <li> w stosunku do zbioru elementów <ul> ?

pytanie zadane 8 kwietnia 2018 w HTML i CSS przez DariuszH Gaduła (3,100 p.)

0 głosów

1 odpowiedź 1,581 wizyt

JavaScript dodawanie ponumerowanych elementów li do listy ul

pytanie zadane 28 lipca 2019 w JavaScript przez Tomyslav Nowicjusz (220 p.)

0 głosów

2 odpowiedzi 551 wizyt

Stylizacja a w ul > li elementu o dwóch klasach

pytanie zadane 17 października 2019 w HTML i CSS przez vingilot85 Obywatel (1,150 p.)

Jak zmienić kolory elementów <ul>?

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

2 odpowiedzi

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci