МЕНЬШЕ - родительские селекторы

В этой главе давайте разберемся, как Parent SelectorsРабота. Можно ссылаться на родительский селектор, используя&(амперсанд) оператор. Родительские селекторы вложенного правила представлены& и используется при применении модифицирующего класса или псевдокласса к существующему селектору.

В следующей таблице показаны типы родительского селектора -

Sr.No.	Типы и описание
1	Множественный & В & будет представлять ближайший селектор, а также все родительские селекторы.
2	Изменение порядка выбора Добавление селектора к унаследованным (родительским) селекторам полезно при изменении порядка селектора.
3	Combinatorial Explosion В & также может производить все возможные перестановки селекторов в списке, разделенном запятыми.

пример

В следующем примере демонстрируется использование родительского селектора в файле LESS -

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
      <title>Parent Selector</title>
   </head>

   <body>
      <h2>Welcome to TutorialsPoint</h2>
      <ul>
         <li><a>SASS</a></li>
         <li><a>LESS</a></li>
      </ul>
   </body>
</html>

Затем создайте файл style.less .

style.less

a {
   color: #5882FA;
   &:hover {
      background-color: #A9F5F2;
   }
}

Вы можете скомпилировать файл style.less в style.css , используя следующую команду -

lessc style.less style.css

Выполните указанную выше команду; он автоматически создаст файл style.css со следующим кодом -

style.css

a {
   color: #5882FA;
}

a:hover {
   background-color: red;
}

В приведенном выше примере & относится к селектору a.

Вывод

Выполните следующие действия, чтобы увидеть, как работает приведенный выше код -

Сохраните приведенный выше html-код в parent_selector1.htm файл.
Откройте этот HTML-файл в браузере, и вы увидите следующий результат.

Оператор родительских селекторов имеет множество применений, например, когда вам нужно объединить селекторы вложенных правил иным способом, чем по умолчанию. Другое типичное использование&состоит в том, чтобы многократно генерировать имена классов. Для получения дополнительной информации нажмите здесь .