ワードプレスのスタイルシートの要素の調べ方

Question

お世話になっております。

ワードプレスでSearch & Filter proの検索フォームを作成しています。
カスタムスタイルシートでチェックボックスのデザインを変えています。
URLはこちらです。
リンク内容

問題点はチェックボックスとテキストが重なってしまうことです。

要素を調べたところ

カスタムスタイルシートでは
padding-left: 35px;
とテキストの余白を作って重ならないようにしているようなのですが

上位のスタイルシート(？)のコードに邪魔されて
無効になってしまっているようなのです。

.searchandfilter li[data-sf-field-input-type="checkbox"] label, .searchandfilter li[data-sf-field-input-type="radio"] label, .searchandfilter li[data-sf-field-input-type="range-radio"] label, .searchandfilter li[data-sf-field-input-type="range-checkbox"] label {
    padding-left: 10px;

この
padding-left: 10px;
を削除したいのですが
どこに書いているのか分かりません。
Style.cssには書かれていませんでした。

どこに書かれているのか
どのように調べれば宜しいでしょうか？

Comments

[yoshinavi]

＞Style.cssには書かれていませんでした。
→　記述してみてはどうですか？

[yasaidemo]

ご回答ありがとうございました。

style.cssに記載しても変わりませんでした。

Answer 1

なるべくheadタグの最後の方に書いてください。
または、要素に直接書き込んでください。
CSSは!importantが付いていなければ後出しジャンケンです。出したのが後の方が勝ちます。優先されます。

Comments

[yasaidemo]

ご回答頂きましてありがとうございました。
ほんと助かりました。

Answer 2

デベロッパー検証ツールを使えば、該当のCSSがどのファイルに記載されているかでるはずですが・・・。
上位のCSSがどこで定義されいているかわからなければ、
yoshi0819さんがおっしゃる方法が一番いいですが、
それでもうまくいかなければ、（headの下の方に書けば、ほぼ100%大丈夫ですが）
タグに直接スタイル書いてみてください。

<p class="hogehoge" style="padding-left: 35px;"></p>

みたいにstyle属性を使う、インナースタイルと呼ばれるもので、
styleの強さの中では、最上位の優先度になります。
ただ、本来、JavaScriptで動的にコントロールするような場面での想定なので、
あまり、HTMLに直接静的に書くのはよろしくありません。
（最終の最終手段ということです）

Comments

[yasaidemo]

お礼コメントが遅れましてごめんなさい。
いろいろとやってみて、なかなかうまくいかなかったのですが
検証ツールでどのファイルに記載されているのか
見方がようやく分かり
(分かってみればすごく簡単なことでした…)
そのファイルのコードを変えることで解決しました。

HTMLに書く方法は
クラス名が違うためだと思いますが
うまくいきませんでした。

ありがとうございました。

[miyabi_pudding]

言及が足りませんでしたね、クラスとタグは例なので、適当につけたものです。
そして、インナースタイルは、クラスもガン無視で、最優先されるスタイルなので、
JS処理が入らない限り、絶対有効になります。
（きかなかったということは、なんらかのJS処理が走っている可能性がある）
なんにせよ、解決されて何よりです。

[yasaidemo]

こちらこそ説明不足で申し訳がありません。
Search & Filter proというプラグインのスタイルシートのようでした。
JS処理というのを理解していませんが
そういう感じがします。