Какие нужны HTML теги?

Question

[Александр Шаповал]

Имеются вот такие стили:

#my p.announce, .tt.pm li li a:hover+span{ color: #000; }

Помогли разобраться...

<div id="my">
            <p class="announce">
                Черный текст
            </p>
        </div>
        <ul class="tt pm">
            <li>
                <ul>
                    <li>
                        <a href="#">Просто ссылка</a>
                        <span>Черный текст если навести на ссылку</span>
                    </li>
                </ul>
            </li>
        </ul>

Comments

[Ярослав Иванов]

Обычно наоборот пишут. Стили к тегам. К чему такой паравоз ? Зачем запятая ? Почему два li ?

[Александр Шаповал]

Ярослав Иванов: та знаю что наоборот, читаю книгу а именно про селекторы, написанное вроде понял, в конце автор говорит вот вам таблица стилей, напишите к нему html код для закрепления материала, вот не могу закрепится...

[Ярослав Иванов]

Александр Шаповал: два последних мои вопроса как бы намекают.

[Александр Шаповал]

Ярослав Иванов: намек про li понял) как раз с этим разбираюсь

[Александр Шаповал]

Александр Шаповал: но все равно не выходит

[Ярослав Иванов]

Александр Шаповал: Александр Шаповал: плюс заменил на >

[Александр Шаповал]

Ярослав Иванов: изменил вопрос, с запятой разобрался, черного текста добился, осталось сделать что бы при наведении на ссылку она тоже чернела, и кстати...там еще написал "Уже не черный текст", почему он уже не черный?)

[Ярослав Иванов]

Александр Шаповал: с выдернутой строчкой из контекста не понятно.

[Александр Шаповал]

Ярослав Иванов: если из стилей убрать одно li и +span то уже работает
#my p.announce, .tt.pm li a:hover{ color: #000; }

[Александр Шаповал]

Ярослав Иванов: из какого контекста? Просто дали стили, для которых нужно прописать html код

[Александр Шаповал]

Ярослав Иванов:

40% задач, которые вы будете решать с помощью jQuery,сводятся к поиску необходимого элемента на странице, так что знание CSS селекторов обязательно. Вот еще кусочек CSS для тренировки, напишите соответствующий ему HTML (это тоже вопрос с собеседования ;):

#my p.announce, .tt.pm li li a:hover+span{ color: #f00; }

[Ярослав Иванов]

Александр Шаповал: не рекомендую работать в компании где такой код пишут)) ну добавь ли в ли а спан положи под ссылкой

[Александр Шаповал]

Ярослав Иванов: как раз это и сделал, span прописал после тега a, теперь при таких стилях работает

#my p.announce, .tt.pm li a:hover+span{ color: #000; }

но надо что бы работало при таких

#my p.announce, .tt.pm li li a:hover+span{ color: #000; }

осталось сделать что бы работало когда идут два li в стилях

[Сергей delphinpro]

#my p.announce, .tt.pm li li a:hover+span{ color: #f00; }

<div id="my">
  <p class="announce">text</p>
</div>

<ul class="tt pm">
  <li>
    <ul>
      <li>
        <a href="#">link</a>
        <span>text</span>
      </li>
    </ul>
  </li>
</ul>

Answer 1

[Stalker_RED]

<div id="my">
  <p class="announce">
    Черный текст
  </p>
  не черный текст
</div>

<ul class="tt pm">
  <li>
    <ul>
      <li>
        <a href="">наведи мышку</a><span>магия!</span>
      </li>
    </ul>
  </li>
</ul>

https://jsfiddle.net/724c54x9/

P.S.:

Comments

[Александр Шаповал]

уже всё понял, спасибо)

Answer 2

[Boris Köln]

1. "+" означает "соседний селектор", а у вас span дочерний к a. Надо span поставить после a
2. li быть потомком другого li не может. Вставьте между ними ul или ol

Answer 3

[Elwen]

Если подбирать семантический html к данным стилям, то будет примерно так:

<div id="my">
  <p class="announce">текст</p>
</div>
<ul class="tt pm">
  <li>
    <ul>
      <li><a href="#">ссылка</a><span>текст</span></li>
    </ul>
  </li>
</ul>

Comments

[Александр Шаповал]

Спасибо большое, у себя ошибку совершил что прописал

<ul>
    <li>
       <li>
        </li>
    </li>

а надо

<ul>
    <li>
        <ul>
            <li>
            </li>
        </ul>
    </li>
</ul>

[Elwen]

Александр Шаповал, Еще обратите внимание, что тут стили прописаны для 2х элементов: #my p.announce и .tt.pm li li a:hover+span. Они идут через запятую и не обязательно должны быть связаны. Просто у них стили одинаковые.
Рекомендую еще почитать про семантику в html, поскольку списки не вкладываются в абзацы (ul не может быть в p, что бы их объединить стоит обернуть оба в div).

[Александр Шаповал]

Elwen: спасибо за замечания, я раньше чисто интуитивно понимал что li не могут быть вложенными в друг друга, что ul не прописывают в p, но когда пришлось писать задом наперед (не css под html а html под css) то тут все незнания и по выползали.