Пятница, 24 Март 2017 18:59

Селекторы CSS

Работая над очередной безумной идеей, столкнулся с вопросом, что нужно было написать стили для элемента с атрибутом name. Поскольку class имел «общий» характер, а id был задействован в javascript’e и дабы исключить фактор «ой, а я и забыл, что ты у меня ещё и к css имеешь отдельную привязку» решил стиль писать по атрибуту name.

Да не тут, то было, к моему стыду знавал я разные селекторы css, но как работать с name не знал, ибо столкнулся впервые. Ответ нашёл быстро, но на всякий случай решил набросать этот обзор, итак от простого к сложному.

Селекторы:

* – любые элементы;
span – элементы с таким тегом;
#id – элемент с данным id;
.class – элементы с таким классом;
[name="value"] – селекторы на атрибут name;
[type=text] - селекторы на атрибут type (со значением text);
:visited – «псевдоклассы», остальные разные условия на элемент;
:hover – свойства элемента при наведении на него курсором мыши.

Так же обращу внимание ещё на такой момент:

<p class="all">
      <div class="one">блок 1</div>
      <div class="two">блок 1</div>
</p>

Стили можно записать следующим образом:

.all{
      color: #000;

      .one{
            color: #fff;
      }
      .two{
            color: #aaa;
      }
}

И записанные условия для контейнеров "one" и "two" будут принадлежать только контейнерам внутри контейнера "all".

Спонсоры: