LESS-親セレクター

この章では、 Parent Selectors がどのように機能するかを理解しましょう。＆（アンパサンド）演算子を使用して、親セレクターを参照できます。ネストされたルールの親セレクターは*＆*演算子で表され、既存のセレクターに変更クラスまたは擬似クラスを適用するときに使用されます。

次の表は、親セレクタのタイプを示しています-

Sr.No.

Types & Description

1

Multiple &

＆*は、最も近いセレクターとすべての親セレクターを表します。

2

Changing Selector Order

セレクターの順序を変更する場合、継承された（親）セレクターの前にセレクターを追加すると便利です。

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 finddevguides</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 ファイルに保存します。 *このHTMLファイルをブラウザで開くと、次の出力が表示されます。

Less Parent Selector

_Parent selectors_演算子には、ネストされたルールのセレクターをデフォルト以外の方法で組み合わせる必要がある場合など、多くの用途があります。* ＆*のもう1つの典型的な使用法は、クラス名を繰り返し生成することです。詳細については、リンク：/less/parent_selector2 [ここをクリック]をご覧ください。

Less-parent-selectors

目次

LESS-親セレクター

例

style.less

style.css

出力