selector 検索結果

検索件数 : 7 件

208
[CSS] その他の疑似選択子 - link, visited, target, enabled, disabled, not, active, hover, focus

こんにちは。明月です。今回でcss選択子の整理が全て終わると思います。今日、紹介する選択子の使用頻度はよく使いますが、よく使わない。つまり、ウェブサービスのスタイルよって違いますが、よく使うところには使いますが、使わないところは全然使わない、その選択子です。上の例をみれば、３つの「a」タグと「div」タグ、そして５つの「input」タグがあります。先、「a」タグの「link」、「visited」は「link」タグによっては一回もクリックしなかった場合の「a」タグを選択、「visited」は一回以上にクリックした場合の「a」タグを選択することです。つまり、初めは赤色の「a」タグが３つありますが、「選択１」をクリックしてしまうと「選択１」の「a」タグはピンク色になりますね。「:target」は「a」タグで「id」によってフォーカスされたものを選択するものです。つまり、ブラウザのアドレスに「#id」名が指しているものが選択されます。「:enable」と「:disabled」は「input」タグで「diabled」属性が「disabled」か「none」かの選択子です。タグの属性で「enabled="enabled"」とはありませんので、「disabled="disabled"」がなければ、「:enabled」の対象、あれば「:disabled」の対象になります。「hover」はマウスのイベントによって選択するものです。「hover」は要素でマウスが上にあると選択されます。つまり、テキストボックスの上にマウスを置くとテキストが白色になりますね。「focus」の場合はテキストボックスの場合、キーボードのカーソルがテキストボックスにあると選択する選択子です。テキストで入力がおわり、他のことを選択するとこの選択子は解除してしまいます。ここまでcssの選択子に関してほとんど纏めて説明しました。cssの選択子はjavascriptやjqueryでも同じ形式で選択子を使うので「css選択子」はウェブで重要な部分だと思います。

Study / Javascript, Jquery, Css

#css,#selector

作成日付 : 2019/12/10 07:31:28       修正日付 : 2019/12/10 07:32:01

209
[CSS] 疑似要素選択子 - fist-line, first-letter, before, after

こんにちは。明月です。前述で疑似クラス選択子に関して説明しましたが、今回は疑似要素選択子ですね。名称が似てますが、選択対象に関しては全然違いますね。疑似クラスの場合は同じタグのリストで何番目の要素を選択ということですが、疑似要素選択子はタグ要素を選択するという意味が近いではないかと思います。この疑似要素はよく使いますが、特に内容を強調やiconを付ける時によく使いますね。「first-line」は「p」、「span」、「div」タグなどの文字列を入れられるタグに使う選択子です。文字列で一行目だけ反映する選択子、つまり「br」タグの前までの適用される選択子です。タグの形式ではなく、文字列で選択する特徴をもっています。「first-letter」の場合、初めの文字だけ反映する選択子です。日本語より英語で似合う選択子で、筆者も使ったことがないですね。そして「before」と「after」はタグの前後に「content」の値を入れるタグです。疑似要素選択子はメニューやアクティブ効果などで使うとよい選択子だと思います。

Study / Javascript, Jquery, Css

#css,#selector

作成日付 : 2019/12/09 07:28:27       修正日付 : 2019/12/09 07:28:47

211
[CSS] 疑似クラス - only-child, only-of-type, empty, empty, root

こんにちは。明月です。前述で疑似クラス nth-childとnth-of-type,first-child,fist-of-typeに関して説明しました。link - [css] 疑似クラス - nth-child, nth-of-type, nth-last-child, nth-last-of-typelink - [css] 疑似クラス - first-child, last-child, first-of-type, last-of-type今回の投稿ではonly-child, only-of-type, empty, empty, rootを調べると思いますが、あまり使わない選択子ですね。それで例を確認しましょう。そしてcssで「only-child, only-of-type, empty, empty, root」を作成してまましょう。「only-child」の疑似クラスは「test」クラスの派生タグで「p」タグが一つだけあることを探します。そしたら「p」タグを持っている「.test」クラスのエレメントは初めの「div」タグと２つ目の「div」タグですね。でも２つ目の「div」タグは「p」タグ以外に「span」タグも持っているので、「only-child」では初めの「dev > p」タグが文字が赤くなると思います。次は「only-of-type」です。「only-of-type」は「only-child」と似てますが、結果は全然違います。「p:only-child」の場合は全ての派生タグで一つの「p」タグと意味です。「span:only-of-type」の場合は全ての派生タグではなく「span」のバグが一つだけのタグですね。「div.test」タグを見ると２つ目と３つ目が「div」タグで「span」タグを持っていますが、２つ目の場合は「span」タグが２つですね。３番目の「div」タグだけ対象です。「:empty」の場合は派生のタグがないタグを調べます。参考に「<タグ>テスト値</タグ>」の形式も派生データがあることで判断します。つまり、「:empty」に選択されません。「:root」は「html」を選択することと同じ意味です。「html」や「body」選択することと「:root」で選択することと差異があるかな。

Study / Javascript, Jquery, Css

#CSS,#Selector

作成日付 : 2019/12/05 07:29:15       修正日付 : 2019/12/05 07:29:41

212
[CSS] 疑似クラス - first-child, last-child, first-of-type, last-of-type

こんにちは。明月です。前述で疑似クラス nth-childとnth-of-typeに関して説明しました。link - [css] 疑似クラス - nth-child, nth-of-type, nth-last-child, nth-last-of-type今回は「first-child」と「first-of-type」に関して調べてみます。簡単に「first-child」に説明すると「first-child」は「nth-child(1)」と同じ意味です。上のテーブルで全ての枠を描こうと思いまして、「td」のタグで重ねないようにしようと考えています。初めの行の初めの列だけの左上の枠を描いて全ての「td」の右下を描くと全ての枠が描くことに出来ます。参考に「first-child」の代わりに「nth-child(1)」を入れても同じ結果になります。

Study / Javascript, Jquery, Css

#css,#selector

作成日付 : 2019/12/04 07:28:37       修正日付 : 2019/12/04 07:29:26

213
[CSS] 疑似クラス - nth-child, nth-of-type, nth-last-child, nth-last-of-type

こんにちは。明月です。cssの擬似クラスは役12個ごろありますが、そのなかで「nth-child」、「nth-of-type」、「nth-last-child」、「nth-last-of-type」に関して調べてみました。先、nth-childやnth-last-childは要素のn番目を選択することです。offsetタイプで数えることではないので初めの番後は「1」から始まります。(プログラムで配列などを数える時にoffset概念で「0」から数えますが、cssの場合は人間が数えるみたいに「1」から始まります。)上の例のテーブルで「4」を選択するようには「tbody > tr:nth-child(1) > td:nth-child(2)　> p:nth-child(2)」で選択すると選択されます。でも、nth-childで「8」番を選択しようと思うと少し迷ってしまいます。なぜなら、8番のタグは「p」タグではなく「span」タグなのです。簡単に考えるとその「td」の中である「span」タグは一つだけなので「tbody > tr:nth-child(2) > td:nth-child(2) > span:nth-child(1)」で選択するとできそうです。でも、実際はできないですね。理由はnth-childの選択子はタグの要素に関係しずに、選択するからです。つまり、span:nth-child(1)の場合はtr:nth-child(2)の派生タグでspanタグがないので、何も選択されない状況になります。纏めて、上のspanタグを選択したいなら「tbody>tr:nth-child(2)>td:nth-child(2)>span:nth-child(2)」の選択子で選択しなければならないです。この状況になると何か迷いますね。単純な構造ならすぐ気づきますが、複雑なタグ構造なら迷ういますね。それでタグ別で順番を選択できる選択子はnth-of-typeです。このことは同じレベルの同じタグ要素のn番目を選択するのができます。その後は「nth-last-child」と「nth-last-of-type」の選択子です。この選択子はネーミングで気づきますが、逆に選択する選択子です。今回は「6」と「5」を

Study / Javascript, Jquery, Css

#css,#selector

作成日付 : 2019/12/03 07:21:20       修正日付 : 2019/12/03 07:22:19

214
[CSS] 属性選択子

こんにちは。明月です。cssの選択子で一番良く使う選択子はタグによって、「id」によって(#id)、「class」によって(.class)が一番良く使う選択子で次がこの属性選択子ではないかと思います。htmlタグではタグ名があるし、タグテキストがあります。そして属性(アトリビュート)がありますね。css側で上の属性によって選択しましょう。上の例は全て「input」タグが４つ、「a」タグが３つがありますね。cssｍｐ属性選択子で選択してスタイルを付けましょう。上の例をみればbodyの中でタグは全て７つがあります。inputタグは４つで、aタグが３つがあります。属性選択子はブランケット([])で選択します。上の通りで一番上のテキストボックスは枠が黒くなりますね。２つ目のスタイルはボタンタイプのinputタグの枠が赤になります。３つ目はvalue属性、つまり、値がsubmitを含めているボタンは枠が青になります。４つ目はhrefの属性が「https」で始まる「a」タグの文字が緑になります。５つ目はhrefの属性が「localhost」で終わる「a」タグの文字がグレーになります。属性選択子はcss selectorの中で良く使う選択子です。

Study / Javascript, Jquery, Css

#css,#selector

作成日付 : 2019/12/02 07:32:37       修正日付 : 2020/01/14 17:25:53

215
[CSS] Selector(選択子)

こんにちは。明月です。cssでselectorというのはhtmlドキュメントにスタイルを付けるような指示子ということです。このselectorは単一のタグを設定も可能し、復讐のタグの設定も可能です。そして、タグだけの指示だと特定タグを選択するのは大変ですが、アトリビュート、配列順番なのでも選択が可能です。参照リンク - https://www.w3schools.com/cssref/css_selectors.aspcss selectorを確認するように先にhtmlドキュメントを作成しましょう。上のhtmlタグは普通のテーブルタグです。htmlタグを作成したことがある方なら構造がすく理解すると思いますね。そうすると我々は「tbody」タグの１番の「tr」タグの１版「td」タグを選択したいならどうしましょうか？簡単にタグで選択すると「table#test > tbody > tr:nth-child(0) > td:nth-child(0)」になります。意味としてはtableのアトリビュートのiｄがtestのタグの直下派生のtbodyの直下派生のtrタグの０番目の直下派生のtdタグの0番目のタグを指しています。複雑ですね。でもタグを指しる時にはこんなに細かく全てのタグ名を書く必要はないです。タグでスタイルを定義するのはそんなに難しくないですね。それなら、css selectorに関して纏めます。 選択子 説明 .class class=”class”の全てのオブジェクトを選択 #id id=”id”のオブジェクトを選択(タグのidはページの雄一が仕様です。) * 全体選択子全てのオブジェクトを選択 element 要素選択子 - 指定した要素を選択 element1,element2 要素選択子 - 選択する要素を様々を指定(element1とelement2を選択) element1 element2

Study / Javascript, Jquery, Css

##Css Selector

作成日付 : 2019/11/28 07:28:03       修正日付 : 2020/01/13 13:59:26