カスタム CSS タブでセレクタを使用する方法

例えば、画像（または任意の子要素）をカラムに配置した場合、画像を囲むラッパーや画像自体のスタイルを設定したい場合があります。

ここでは、様々な要素の周りに5pxの赤いボーダーを配置してみましょう。

まず、画像ウィジェットをカラムにドラッグし、「画像」>「詳細設定」>「カスタムCSS」と進みます。

次に、「カスタムCSS」タブで、以下のように入力します。

selector { border: 5px solid red; }

画像ウィジェットを編集しているので、ボーダーが画像を取り囲んでいないことに驚くかもしれません。その代わりに、ラッパー要素（この場合、画像が入っている列）を囲んでいます。

子要素（この場合は画像）を指定するには、代わりにカスタムCSSに以下のように入力します。

selector img { border: 5px solid red; }

これは、「selector img」に影響を与えるように指定しているので、画像の周りにボーダーを配置します。

では、別の例で試してみましょう。

ボタンウィジェットをカラムにドラッグして、10px のパディングを与えて、その周りのカラムがきれいに見えるようにします。ボタンの詳細設定タブで、パディングを10に設定します。

これでボタンは以下のようになります(色は変わるかもしれません)。

次に、カスタムCSSを使って背景色を適用してみましょう。

以下のように入力します。

selector { background-color: #ffff00; }

先ほどと同様に、これはボタンそのものではなく、ボタン要素のラッパーに適用されます。今回は、10pxのパディングがあることで、列全体がスタイルの影響を受けないようになっていることに気づくでしょう。

そしてもちろん、ラッパーではなくボタンに適用される背景色が欲しい場合は、代わりに以下のように入力します。

selector .elementor-button { background-color: #ffff00; }

これにより、ボタンの背景は黄色になります。

Elementorのショートカットとしてselectorを使うと、カスタムCSSをより素早く簡単に書くことができます。しかし、代わりに独自のカスタムクラスを使うという選択肢も常にあります。

ボタンの背景をやり直してみましょう。(詳細設定 > CSS クラスに移動し、ここで先行するドットが含まれていないことを確認してください)。

さて、カスタム CSS タブでは、”selector” を使用する代わりに、カスタムクラス “.so-yellow” を参照します。

予想通り、ボタンのラッパーの背景には鮮やかな黄色が使われています。

ボタン自体をターゲットにするとどうなりますか？

以下のように入力します。

.so-yellow .elementor-button { background-color: #ffff00; }

ボタンの紫の色が変わっていないことに気づくでしょう!

それは、私たちの新しいスタイルは、この場合に追加された !重要な宣言が必要だからです。

.so-yellow .elementor-button { background-color: #ffff00 !important; }

これでスタイリングが適用され、ボタンは再び黄色になりました。

鮮やかな黄色の背景にボタンの文字が隠れてしまうのを防ぐために、文字の色を変えてボタンのスタイリングを完成させましょう。また、ボタンにはボーダーを付けてみましょう。selector .elementor-button」でも「.so-yellow .elementor-button」でも、追加するコードは同じです。

selector .elementor-button { background-color: #ffff00; color: #000000; border: 2px solid #000000; }

要素のラッパーをターゲットとしたカスタムCSSを素早く追加したいときは、セレクタを使って楽しんでください。