質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.45%

  • HTML

    11919questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    7825questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    5311questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2709questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

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

解決済

回答 4

投稿

  • 評価
  • クリップ 1
  • VIEW 268

toll_tree

score 35

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

<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>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2019/06/12 17:04

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

    キャンセル

  • mts10806

    2019/06/12 17:48

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

    キャンセル

  • mts10806

    2019/06/12 18:01

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

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

    キャンセル

  • 退会済みユーザー

    2019/06/13 09:49

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 4

+6

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

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

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

:not()とか。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

checkベストアンサー

+4

  • 否定の場合は:not() を使うと良いですよ。
    以下のセレクターで、2番目と3番目以外を示します。
.page_list li:not(:nth-child(2)):not(:nth-child(3)){
  //
}
  • 2番目から3番目を示したい場合は以下の様にします。動作原理については割愛しますが。
    ただ、例えば、2番目と5番目のみ といった方法はちょっとわからないので、,で区切るのが手っ取り早いですね。
.page_list li:nth-child(n+2):nth-child(-n+3) {
  //
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/06/12 17:13

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

    キャンセル

  • 2019/06/12 17:16

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

    キャンセル

  • 2019/06/12 17:18

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

    キャンセル

  • 2019/06/12 17:25

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

    キャンセル

  • 2019/06/12 17:31 編集

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

    キャンセル

  • 2019/06/12 17:32

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

    キャンセル

  • 2019/06/12 17:49

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

    キャンセル

  • 2019/06/12 18:02

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

    キャンセル

  • 2019/06/12 18:35

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

    キャンセル

+2

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/06/12 18:49

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

    キャンセル

  • 2019/06/12 19:10

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

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

    キャンセル

  • 2019/06/12 20:55

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

    キャンセル

+2

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;
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/06/12 17:19

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.45%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • HTML

    11919questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    7825questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    5311questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2709questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。