not()が効かない

Question

前提・実現したいこと

<main>のテキストを中央寄せにしているページに対して、 ".no-center"というクラスを指定した<ul>のみセンタリングを解除したいのですが、not()が効きません。 どう記述すれば良いでしょうか…。

該当のソースコード

<main class="center">
  <section>
    <h2>タイトル</h2>
    <p>テキスト<p>
    <ul class="no-center">
     <li>リスト</li>
     <li>リスト</li>
    </ul>
  </section>
</main>

.center :not(.no-center){
    text-align: center;
}

試したこと

■ .center :not(.no-center) のスペースを消す
→ .center:not(.no-center)

■ <main>ではなく<section>に"center"を指定する

いずれも結果は変わりませんでした。

Answer 1

not()が効きません。

効いてはいますが、それと関係なく、text-align:centerとなる理由が2つあります。

• text-alignは継承されますので、.center :not(.no-center)にマッチした<section>からの継承で、<ul class="no-center">自体もtext-align:centerが適用されます。
• .center :not(.no-center)には、<ul class="no-center">の内側にある<li>もマッチします。

ということで、意図したことを実現したいなら、.centerだけtext-align:centerをかけて、.no-centerで別なtext-alignを入れて上書きする必要があります。

Comments

[ucswt]

なるほど…。not()で否定してもtext-alignの継承が優先されるということでしょうか。
教えて頂いたとおり別々にスタイルを指定したら上手くいきました！ありがとうございました！

Answer 2

単にsectionがセンタリングしてるだけでは？

.center > section > :not(.no-center){
  text-align: center;
}