Pull to refresh

Эмуляция >

Reading time 1 min
Views 934
Как известно некоторый браузер не поддерживает правила «>» в CSS, которое иногда бывает очень нужным, например при создании списка списков, когда первый уровень списка не имеет отступа, а второй и последующие имеют. Сегодня мне в голову пришло решение, которое я хочу представить на ваш суд:

<style type="text/css">
.wrapper ul li {color: red; margin-left: 0;}
.wrapper * ul li {color: green; margin-left: 20px;}
</style>

<div class="wrapper">
  <ul>
    <li>red
      <ul>
        <li>green</li>
        <li>green</li>
        <li>green
          <ul>
            <li>also green</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Первое правило в данном случае будет аналогом .wrapper > ul > li, что и требовалось.

Надо понимать, что это не полноценная эмуляция «>», т.к если из CSS правил убрать .wrapper, то результат будет тот же самый и это может привести в заблуждение.

Честно говоря не уверен, изобрёл ли колесо, потому что сейчас смотрю и думаю, что всё это уж как-то слишком просто оказалось.

upd: mtonly подсказал, что «всё уже украдено до нас»: meyerweb.com/eric/thoughts/2005/05/31/universal-child-replacement
Tags:
Hubs:
+7
Comments 18
Comments Comments 18

Articles