Закрыть
Войти
Подождите...
Собирается информация...
Восстановить пароль
Логин или пароль введены не верно!
Подождите...
Идет авторизация.
Вход
Логин или пароль введены не верно!
Забыли пароль?
или войти через вконтакте

Селекторы

Основы HTML и CSS
В этом уроке мы изучим, как прописывать селекторы, какие есть типы селекторов.
Текстовый вариант урока

В этом уроке мы изучим, как прописывать селекторы, какие есть типы селекторов. На самом деле их огромное количество, и все сразу не запомните. Даже я некоторые до сих пор ещё не знаю за ненадобностью. Мы сейчас изучим базу, самые основы, самые важные типы селекторов, которые по большей части мы с вами и будем использовать в дальнейшем в уроках.

1) tag {} 

Итак, первый способ:

div{
}

это обращение по тегу, то есть вы пишете конкретно тег, название тега, которому мы хотим назначить свойство. В данном случае мы обращаемся к «div’у».

2) .class {}

Следующий способ – это обращение по классу, то есть мы пишем точку и значение этого атрибута.

.button{
}

3) #id {}

Еще один способ – это обращение по id, когда мы пишем id атрибут и по его значению мы находим этот тег.

#button{
}

4) *{}

Есть ещё один такой своеобразный способ обращения к тегам – это мы ставим просто звёздочку:

*{
}

Тогда мы обращаемся к абсолютно всем тегам, которые есть только у нас на странице. Абсолютно все теги примут свойство, которое мы укажем здесь.

5) selector selector{}

Теперь поговорим немножечко о вложенностях тегов. Допустим, у нас есть такой тег, который называется ul-li и он создаёт список. Мы его ещё подробнее изучим, но сейчас просто для примера всё-таки рассмотрим. Напишем вот такой код: 

<ul>
 <li>Раз</li>
 <li>Два</li>
 <li>Три</li>
</ul>

У нас на странице появится вот такое список с маркерами, где написано «Раз, два, три».

  • Раз
  • Два
  • Три

Давайте в CSS сделаем селектор «Ul», где зададим серенький background и сделаем следующую фишечку: напишем селектор «ul li», зададим background «red» и сделаем отступы сверху 20px и снизу 10px. 

 

ul{
  background:#ddd;
}
ul li{
  background: red;
  margin-top:20px;
  margin-bottom:10px;
}

И получается вот такая штука.


Есть «ul», который серенького цвета, есть «li-шки» те, которые красного цвета и у них есть отступы между друг другом.

То есть в данном случае мы сделали следующую фишечку. С помощью этого селектора ( ul li {} )  мы сделали подсвеченными только те «li», которые находятся в теге «ul». У нас есть вложенность. И все теги, которые находятся в «ul», теперь будут красненькие.

6) selector > selector{}

Теперь усложним немножечко ситуацию и переверстаем страницу, сделаем несколько «div’ов». Давайте проведём аналогию со списком и дадим просто классы «ul» и «li».

<div class="ul">
  <div class="li">1</div>
  <div class="li">2</div>
  <div class="li">3</div>
</div>
.ul{
  background:#ddd;
}
.ul .li{
  background: red;
  margin-top:20px;
  margin-bottom:10px;
}


Посмотрим результат:


Как видите, у нас есть серый фон – это есть общий тег «div» с классом «ul» и есть теги «div» с «li-шками», которые красненькие.

 

 

Теперь немножечко усложним ситуацию и внутри первого элемента списка мы поставим ещё несколько «div’ов» с классом «li» и дадим значение «1.1», «1.2», «1.3» - подсписок списка. Посмотрим код и результат:
 

<div class="ul">
  <div class="li">

    1

    <div class="li">1.1</div>

    <div class="li">1.2</div>

    <div class="li">1.3</div>

  </div>

  <div class="li">2</div>

  <div class="li">3</div>

</div>




Давайте немного изменим селектор на вот такой.

.ul > .li{
  ...
}


То есть между .ul и .li мы добавили знак ">".

Визуально сейчас ничего не изменилось, только изменились размеры – "маргины упали". Но если обратить внимание, то для первого элемента «li» свойства назначаются.



А для вложенных «li-шек» свойств никаких нет, именно поэтому пропали отступы, которые для этого назначались.



Как это работает? Если мы ставим знак  ">", то свойства передаются всем элементам, которые находятся внутри родительского элемента, в данном случае «div’а» с классом ul. Заметьте, что для .li второго уровня блок .ul не является прямым родителем, поэтому им свойства не назначаются.

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

6) selector *{}

Дальше вы можете сделать такую же фишечку, но написать звёздочку.

.ul *{
  background: red;
  margin-top:20px;
  margin-bottom:10px;
}

Как я говорил до этого, звёздочка назначает свойства всем тегам. В данном случае свойства будут назначаться всем тегам, которые будут в теге с классом «ul». То есть, если бы здесь был тег «p» ещё с каким-то текстом, то, допустим, назначилось бы тоже свойство. 

7) selector[attr=value]{}

Давайте разберём ещё один способ обращения к тегам. Допустим, мы напишем «div» и у него есть какой-то атрибут.

<div attr='attr_2'></div>

Допустим, образно говоря, у нас такая ситуация у нас всё-таки сложилась, и нам нужно обратиться с помощью CSS к конкретному атрибуту. Для этого мы пишем следующий селектор:

div[attr='attr_2']{
  width:100px;
  height:100px;
  background:red;
}


Мы пишем квадратные скобочки и пишем «attr=”attr_2”».

 

 

 

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

Можно назначить свойство всем тегам с помощью звёздочки.

Так же мы можем работать с вложенностью тегов, либо назначать свойства всем вложенным элементам, тогда мы пишем селектор и через пробел ещё какой-нибудь селектор, допустим, «li», либо обращаться только к конкретным дочерним элементам, которые не идут по дереву дальше, а только те, которые вложены в этот тег. Для этого пишем между селекторами зна ">" и обращаемся к этим элементам.

Последнее свойство, которое вы можете использовать – это обращение по атрибутам. Для этого пишете квадратные скобочки и внутри атрибут и значение, к которому вы хотите обратиться.

На этом всё! На следующем уроке мы создадим маленький такой шаблончик использования Html-тегов и CSS-свойств, который вы в дальнейшем сохраните и будете использовать.

Предыдущий урок Следующий урок
Тестирование

Чтобы пройти тестирование, необходимо войти или зарегистрироваться

Политика конфиденциальности   Пользовательское соглашение