Селекторы

Селекторы, которые я не использовала ни разу, а наверное полезная штука:

h1+p — выделяет абзац, следующий сразу за заголовком. Это работает только с сестринскими тегами, не с потомками.

p * — все теги, вложенные в p (например strong, em, span, a)

Селекторы — примеры использования

Селектор :target

Селектор :target используется с внутренними ссылками.

В примере при нажатии на ссылку, появится форма.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>

 <style>
  #hello {
   display: none;
  }
  #hello:target {
   display: block;
  }

</style>
</head>
<body>
 <a href="#hello">Подписаться на рассылку</a>
 <form action="" id="hello">
  <label for="email">Укажите ваш адрес электронной почты</label><input type="text" id="email"> 
  <input type="submit" value="Подписаться">
 </form>
</body>
</html>

Селектор  :not()

Выбрать все ссылки, ведущие на внешние сайты (тоесть не на домен mysite.com)

a[href^="http://"]:not([href*="mysite.com"])

Сброс значений отступов

*{
 padding: 0;
 margin: 0;
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s