メモ

メモを入力してみよう!


Lesson 11「セレクタ」

学習概要

CSS言語での要素へのスタイル指定方法とスタイル指定が被った場合のスタイルが適用される優先順位を学習していきます。

補足

セレクタの主な種類の最初に「※(こめじるし)」と説明していますが、「*(アスタリスク)」の誤りです。

指定のタグに対してスタイルが上手く適用されない場合は、「スタイルの優先度」が低い場合があるので、優先度を上げて試してみましょう。

この練習でわからない所を質問する※部活外の質問はできません

ログインが必要です

この練習への質問一覧

ログインが必要です

Lesson 11「セレクタ」の内容※SEO用のため読めません

HTML CSS について学んでいきます今回学んでいくのはこちらセレクター海ではこれからですね実際にセレクターというものちょっと説明していきたいと思いますセレクターというのは前回ちょっとお話ししましたけども同一にスタイルを指定してやるのかと言うとの同一という部分ですね誰に伝えるを指定するとかいうとこなんですけれどもその指定方法戸田恵子様々ありますので主に使うものというのこれからちょっとあげていきたいと思います主に使うのがですねこちらになります上からちょっと見ていきたいと思うんですけれどもまず一つが米印を使った方ですばこめじるし中学校っていう形で指定してあげような使い方ですねこれは全要素に対してスタイルをしてしまったのであるが色々ありますけれどもタグ=要素というので全てのタブ全部の要素に対してスタイルを指定するよという形のスタイルの指定方法になりますねもう一つがですね今まで使って北やり方ですね要素 X でありますけれどもタグの名前をつけるやり方です7デジタル使い方見てもらうといいことやってきたぐに対してスタイルを指定しますよという形のスタイルの捨て方ですねもう一つがこの子展開ありましたけれども ID 属性に対してスタイルを指定するという方法がありますこの前借りましたけれどももう一つがクラス属性に対してスタイルを指定するものはどの星からの BG から1とかっていましたけどもうとクラスの名前ですねを指定してあげるというやり方がありますその他の新しいですね視察方を見てもらうとですね T 半角への中学校で伝えるしてしまっを通していこうかと言うと P タグ P タグの中に A タグとか色々た雲が平られますけども P タグの中にある A タグに対してスタイルを指定しますという形のスタイルを指定をやりますその下がですねと同じような感じに見えるんですけれどもえぎ台何で中華これスタイルを指定してますこれ何かと言うと P タグの中にある A タグに対してスタイルを指定しますうさぎの隣に見るかもしれないんですけれどもタダですね P タグの中にある直感になる永沢ですに対してスタイルを指定するというものでありますこれどういうことかというと P タグの中にマタタビを入れてその中にタグを入れることができるんですねん坂の上の方は P タグの中にある英単語であればいいと会ってその中に例えば再起動が入っていてその下に A タグがあったとしてもその A タグに対してすたいかしてされますでもいいだいないかという形の指定方法だと P タグの中にあるすぐ下にある A タグに対してスタイルが指定できるので酒を飲んだ間に行くことを挟んでた形になってしまうとスタイルが適用されなくなりますのでこの形を使うことで P タグの中にある直下にある計画に対してだけでスタイルをしてことができるようになります次にですねその下で帰りましたねえ P タグカツ Class 属性がボタンのものに対してスタイルを指定しますよこういった形で絞ったクラス属性をつけたもので指定するという形もできますもう一つ下も同じように P タグかつ ID 属性は今度何かしても名前のものに対してスタイルを指定するようなスタイルの指定方法もできませんで最後ですねこれまで行ってないですけれどもどういったものかと言うとですね基本的に使うことが多いかと思いますリンクのタグですねリンクの例えばまあ続きを見るとか次へ行くとかそういったリンクの文字があってその上にボタンを押すですねカーソルを合わせた時になったりしますねそういったものを指定の方がこれですタガメこばとやることでま例えば例え挙母工場とやることでその要素の上にマウスがなった時に何かしらのスタイルを指定しますよ 今から俺という形にすればマウスが乗った時にそこにある文字色が赤く変化しますよという形のスタイルの指定方法ができます他にもですねいろいろな指定音がありますただ主に使うのはこれですのではこれだけまずは覚えていただければと思いますデレステスタイルの優先順位というものちょっとを説明していきたいと思いますそのスタイル CSS で指定しますけれどもその指定が被る場合がありますか打った時にどっちが優先されて伝える変化するので言うところの優先順位があります例えばですね今表示されてるように P タグ勝手 ID 属性にタイトルと名前が付いてるでクラス属性にボタンという名前がついていたものがあったとしますこれに対してスタイルを指定しましたスタイルを指定した場合ですねまず有線順位が高いスタイルを指定方法というのがこちらになりますこれはですねピーターに対してスタイルを指定してるんですけれどもわからレッドと会っておまで同じなんですがその後半角スペースがあってびっくりマークで important と書かれてセミコロンで閉じられていますこのビックリマーク important important をつけるとですね一番最優先でスタイルが指定されます次にですねスタイルが重複した場合に優先されるのがこちらですこれですね他の事態にスタイルを変えてしまう指定してしまうっていう方法です CSS に書かないでですねこのタグ自体に書くことができます何でしてるのにスタイルを指定することができます伝える属性というものを使っていただければ同じように COLOR Red と魔王 CSS と同じ形ですねでセミコロンで閉じていただければこの P タグに対して直接スタイルが指定されたのですね important の次に予定されてスタイルが指定される方法です次に優先されるのがですねこちら ID 属性を指定した場合ですか2 ID 属性がないないという形で合わせた場合ですねただの P タグだけではなくて勝つ ID 属性がこれですよという形でさらに絞り込んだものですこれが次に優先されてスタイルが適用されますその次にスタイルが優先されて適用されるのがクラスの曲を使ったものですねティータイムでかつまた絞り込んでクラス属性がないのもという形で絞り込んだ場合ですねこれはですね ID 属性よりもクラス属性の方がいろんなタグにつけられますので ID 属性だと P タグでタイトルの ID 属性とはもうこれで合ってんかなしで決まりますけれども P タグで勝つクラス特性がボタンとかってなってくると他にもついている可能性がありますので複数ある可能性がありますたので絞り込みがどちらかと言うと ID 属性のが高いのでそちらの方が優先されてクラス属性の次の優先で適用されるっていう形になります最後はですね書いた順番で優先順位が決まってきますので同じ P タグに対して最初は文字色を赤に使用できてたのがその下には同じキータグに対して文字色を青にしますとしてますそうした場合はいちばんさいごに書いたものが優先されて適用されるって形になりますこのようにですねどの要素のタグに対してスタイルを指定するかその要素の特定どの要素だっていうのがわかればわかるほど優先度が高くなるという形でスタイルがえスタイルが決まっていきますこれからですねプログラミングを始めていくとですね指定したスタイルとですね違う表示になってるとかっていう場合がありますそういう場合にはこういった形で伝えの優先順位があるのでそれによって違うスタイルが指定されている適用されてしまってるって言う場合がありますのでその辺りをチェックしてみていただければと思います