Css момощь nth-child

123

25 марта 2021, 01:10

Есть такое меню, прописал я

#header .top-menu ul li a:hover {color:#4a4a4a;}

и все ссылки меняют цвет при наведении как сделать что только ссылка 4 и ссылка 1 меняла цвет при наведении мышки ?

<li><a href="#"><b>Ссылка 1</b></a></li> 
<li><a href="#"><b>Ссылка 2</b></a></li> 
<li><a href="#"><b>Ссылка 3</b></a></li> 
<li><a href="#"><b>Ссылка 4</b></a> 
  <ul> 
    <li><a href="#">Ссылка подменю 1</a></li> 
    <li><a href="#">Ссылка подменю 2</a></li> 
    <li><a href="#">Ссылка подменю 3</a></li> 
    <li><a href="#">Ссылка подменю 4</a></li> 
  </ul> 
</li>

Answer 1

Решение в лоб:

#header .top-menu ul li:first-child:hover a, 
#header .top-menu ul li:nth-child(4):hover a { 
  color: red; 
}

<div id="header"> 
  <div class="top-menu"> 
    <li><a href="#"><b>Ссылка 1</b></a></li> 
    <li><a href="#"><b>Ссылка 2</b></a></li> 
    <li><a href="#"><b>Ссылка 3</b></a></li> 
    <li><a href="#"><b>Ссылка 4</b></a> 
      <ul> 
        <li><a href="#">Ссылка подменю 1</a></li> 
        <li><a href="#">Ссылка подменю 2</a></li> 
        <li><a href="#">Ссылка подменю 3</a></li> 
        <li><a href="#">Ссылка подменю 4</a></li> 
      </ul> 
    </li> 
  </div> 
</div>

first-child - :first-child находит любой элемент, являющийся первым в своём родителе.

nth-child - :nth-child находит один или более элементов, основываясь на их позиции среди группы соседних элементов.

Если всё же имелось в виду первый и последний элемент:

#header .top-menu ul li:first-child:hover a, 
#header .top-menu ul li:last-child:hover a { 
  color: red; 
}

<div id="header"> 
  <div class="top-menu"> 
    <li><a href="#"><b>Ссылка 1</b></a></li> 
    <li><a href="#"><b>Ссылка 2</b></a></li> 
    <li><a href="#"><b>Ссылка 3</b></a></li> 
    <li><a href="#"><b>Ссылка 4</b></a> 
      <ul> 
        <li><a href="#">Ссылка подменю 1</a></li> 
        <li><a href="#">Ссылка подменю 2</a></li> 
        <li><a href="#">Ссылка подменю 3</a></li> 
        <li><a href="#">Ссылка подменю 4</a></li> 
      </ul> 
    </li> 
  </div> 
</div>

last-child - :last-child находит любой элемент, являющийся последним в его родителе.

Answer 2

#header .top-menu ul>li:nth-child(3n+1)>a:hover { 
  color: red; 
}

<div id="header"> 
  <div class="top-menu"> 
    <ul> 
      <li><a href="#"><b>Ссылка 1</b></a></li> 
      <li><a href="#"><b>Ссылка 2</b></a></li> 
      <li><a href="#"><b>Ссылка 3</b></a></li> 
      <li><a href="#"><b>Ссылка 4</b></a> 
        <ul> 
          <li><a href="#">Ссылка подменю 1</a></li> 
          <li><a href="#">Ссылка подменю 2</a></li> 
          <li><a href="#">Ссылка подменю 3</a></li> 
          <li><a href="#">Ссылка подменю 4</a></li> 
        </ul> 
      </li> 
    </ul> 
  </div> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Не могу сделать отступы для .select() в JQuery UI

Добавил в html тэг select с классом meal, после чего используя библиотеку JQuery UI я стилизовал meal черезselectmenu(), сейчас мне необходимо подвинуть этот...

c++

undefined reference to ' ' (ОШИБКА КОМПОНОВКИ)

хочу показать мою проблему на примере 3-ёх мини-файлов: pr1h pr2

180

c++

Событийная модель C++

114

c++

Открытие виртуального COM порта

Есть устройство, которое может записывать в заданный COM портНужно считать данные с этого COM порта

124