複数の要素以外及び、複数の要素のみのCSSの指定方法について

Question

CSSを指定する際に、効率的なやり方はないかと思い、ご助言を頂戴したく質問させて貰いました。
下記コードの「ul」要素の中の「li」の２番目と３番目以外に対してCSSを当てたい場合、逆に2番目と３番目のみにCSSを合てたい場合、効率的な方法としましては、どのような方法があるでしょうか？
qiitaの記事を参考に考えていたのですが、特定の要素番目や奇数番目、偶数番目などの指定方法はあったのですが、「２つの要素」以外などの指定方法が分からなかったもので...

<div class="top_content">
  <ul class="page_list">
    <li>
      <i class="black_circle_svg"></i>
      <p>来院目的</p>
    </li>
    <li>»</li>
    <li>
      <i class="circle_svg"></i>
      <p>予約日選択</p>
    </li>
    <li>»</li>
    <li>
      <i class="circle_svg"></i>
      <p>予約時間選択</p>
    </li>
    <li>»</li>
    <li>
      <i class="circle_svg"></i>
      <p>情報入力</p>
    </li>
    <li>»</li>
    <li>
      <i class="circle_svg"></i>
      <p>入力確認</p>
    </li>
    <li>»</li>
    <li>
      <i class="circle_svg"></i>
      <p>登録完了</p>
    </li>
  </ul>
</div>

Comments

[m.ts10806]

＞記事を参考に考えていたのですが
考えるだけではなく分からないなりに色々試してみれば良いのでは。
あれだけきちんと書いてある参考記事があるのに何も試していない（＝質問本文にCSSがない）のは丸投げです。

[m.ts10806]

複数指定できること、:not()を使うこと
全て私が最も早く書いていますが見えませんか？
次から全て見出し表記で書きましょうか？

[m.ts10806]

あと、「苦手な人、嫌いな人以外にコメントをする」という失礼な行為をいつまで続けますか？
コメントを強制はできませんが、あからさまな対応の違いを世界中の人が見ています。
明らかに間違った回答ならともかく高評価がきちんとついた回答に対して無反応って人としてどうなんでしょうか。
何度も言っているようにベストアンサーに選べとは露ほども思っていません。
が、無反応や無視を続ければ続けるほどあなたの質問者としての立場や資質が問われるのは間違いありません。

私が回答した質問はまだ解決済みになっていませんね。
https://teratail.com/questions/194052
これ以上待っていても回答は来ませんよ。私の回答で解決できる問題なので。

Answer 1

役割が違うのであれば本来は別クラスを準備してそれぞれ当てるべきと思います。

あとは、
,で区切れば複数のクラスに同じ指定を当てることができるのでその仕様を利用するとか。

.test1
,.test2
{
 color:#f00;
}

:not()とか。

Answer 2

• 否定の場合は:not() を使うと良いですよ。

以下のセレクターで、２番目と３番目以外を示します。

.page_list li:not(:nth-child(2)):not(:nth-child(3)){
  //
}

• 2番目から３番目を示したい場合は以下の様にします。動作原理については割愛しますが。

ただ、例えば、2番目と５番目のみ　といった方法はちょっとわからないので、,で区切るのが手っ取り早いですね。

.page_list li:nth-child(n+2):nth-child(-n+3) {
  //
}

Comments

[toll_tree]

ご回答ありがとうございます。
実は、これらを２、３番目以外、及び２，３番目のみを指定する際に２回のCSSの指定でできたら、html,cssの記述が少なくて済むかなと思ったものでして。
yamabe.jpさんの回答と併せますと、2回での記述が可能になりますかね...?

[toll_tree]

しかし、特段２回で書くことにこだわらなくても良いかもしれませんね...
そこまで記述量も差があるわけではないでしょうし...

[toll_tree]

今、気づいたのですが、:not()は続けて書くことができるんですね。まとめて指定できるので、便利ですね。。。

[foobar810]

２番目と３番目にスタイルを当てる場合の回答を追記しました。
確かに、カンマで複数書けば良いかもしれませんね。

[foobar810]

２番目と３番目と書きましたが、追記した回答についてはA番目〜B番目　の連続した範囲でないと使えないので、例えば ２と５といった値だとやはりカンマ区切りしか思いつきません。すみません。。

[toll_tree]

いえ！参考になりました！ありがとうございました。

[toll_tree]

すみません。そもそもお聞きするポイントを間違ってしまっていました。
自分が実現したかったのは、「li」の中の「i」要素に対してでして、２、３番目の「i」要素及びそれ以外の「i」要素に対してでした。せっかくご回答頂いたのに申し訳ないです。
しかし、頂いたご回答を元に、「i」要素に対し、２，３番目以外の設定を行おうと思い、
「.page_list li:not(:nth-child(2)):not(:nth-child(3)) i{ margin-left:16px;}」としてみたのですが、
２番目の「i」要素にはスタイルが適用されていないのですが、3番目の「i」要素には適用されてしまっています...自分の指定の仕方が間違っているのでしょうか。。。？

[foobar810]

質問を誤解していました。その場合だと、i要素を含まないli要素なので以下の様になると思います。
.page_list li:not(:nth-child(3)):not(:nth-child(5)) i

[toll_tree]

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

Answer 3

2と3を除く＝1および4以降

.page_list li:nth-child(1),.page_list li:nth-child(n+4){
color:red;
}

追記

一応、2以上3以下を継承にして、それ以外に属性を設定してもいけます

.page_list li{
color:red;
}
.page_list li:nth-child(n+2):nth-child(-n+3){
color:inherit;
}

Comments

[toll_tree]

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

Answer 4

「２つの要素」以外などの指定方法が分からなかったもので...

考えを反対にして、まずは全ての要素にスタイルを当てて、スタイルを適用したくない要素にだけスタイルを解除するCSSを用意して適用する

Comments

[m.ts10806]

実は一番「効率的なやり方」ですね。
コードも短く済みそう

[hentaiman]

フォローありがとうございます。恥ずかしながら効率とかは全く考えてませんでした。
質問者が自力で調べた情報だけでも考え方次第で対応出来るよって思って回答しただけという・・・

自分だったら:～系のセレクター使って後々要素ズレて問題になるかもって考えるのも嫌なので、普通にCSS適用したいタグにだけクラス書いちゃいます。htmlの構成や要素数にもよるけど、きっと回答に書いたやり方もしないなあ・・・

[m.ts10806]

まずできるやり方で実現してからというのは有用な考え方だと思いますし、むしろ試行錯誤の結果の再効率や機能をふんだんに使ったコードをいきなりもらっても混乱が増すだけだとも思います。
SQLとか配列の処理とか特にそういう場面多いですね。
理解するのに時間がかかって、結局そのときだけ分かったつもりになって自分でカスタマイズできなくて、逆に非効率になるように思います。
私も最初は適用したいクラスだけにって書こうと思ったのですけど、「効率的な」というところにちょっとだけシフトした形になりました。
コーディング効率的でいうとSCSSが浮かんだんですが、たぶん質問者さんにはまだ雲の上の概念なので伏せました。