Webデザインラボ当サイトはJavaScriptが有効に設定されていないと正しく表示されません。【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。2016/03/17こんにちは(・∀・)CSS3で新しく追加されたセレクタをご紹介します。CSS3以前のセレクタについてはこちらをご覧ください。{}属性名で指定した値の開始文字列で指定した文字列から始まる要素に適用させます。サンプルはhref属性の値がhttpで始まるa要素に対してCSSを適用させます。CodePen.Resultタブをクリックして見ていただければわかると思いますが、href属性の値がhttpで始まっているa要素の文字はピンク色で表示されているのがわかると思います。{}属性名で指定した値の終了文字列で指定した文字列で終了する要素に適用させます。サンプルはhref属性の値が.htmlで終了するa要素に対してCSSを適用させます。CodePen.href属性の値が.htmlで終了するa要素の文字はピンク色で表示されています。{}属性名で指定した値に該当する文字列が含まれている要素に適用させます。サンプルはtarget属性の値が_blankのa要素に対してCSSを適用させます。CodePen.target属性の値が_blankのa要素の文字はピンク色で表示されています。{}E要素の後に出現するF要素に対して適用させます。E要素とF要素は兄弟関係でないと適用されません。サンプルはh2の後に出てくるh2に対してCSSを適用させます。CodePen.HTMLタブをクリックして見ていただければわかると思いますが、四番目のh2要素はdivの子要素となっており兄弟関係ではないのでCSSは適用されません。{}文書のルート要素にスタイルが適用されます。CodePen.:rootセレクタはhtml要素と等しいのですが、:rootセレクタの方がhtml要素より優先されます。{}同じ親要素の中にある子要素の最初から数えてn番目の要素に適用します。odd、evenといったキーワードを使用して奇数と偶数で指定したり、何番目だけを指定するという様な書き方ができます。{}」の場合、div要素の5番目の子要素(3番目のp要素)に適用されます。{}」の場合、5番目の子要素がp要素でない場合はどれにも適用されません。CodePen.1番目4番目を黄色、2番目5番目をピンク、3番目6番目を青に指定しました。{}同じ親要素の中にある子要素の終わりから数えてn番目の要素に適用します。書式は:nth-child()と同じで、odd、evenといったキーワードを使用して奇数と偶数で指定したり、何番目だけ指定するという様な事ができます。CodePen.この疑似クラスは後から数えるだけで:nth-child()と書式は同じです。{}同じ親要素の中にある子要素の最初から数えてn番目の同じ要素にだけ適用します。書式はodd、evenといったキーワードを使用して奇数と偶数で指定したり、何番目だけ指定するという様な事ができます。CodePen.:nth-child()は指定している要素同士が続いている必要があるのに対し、:nth-of-type()は離れていても適用されます。{}同じ親要素の中にある子要素の後ろから数えてn番目の同じ要素にだけ適用します。書式はodd、evenといったキーワードを使用して奇数と偶数で指定したり、何番目だけ指定するという様な事ができます。CodePen.この疑似クラスは後から数えるだけで:nth-of-type()と書式は同じです。{}同じ親要素の中にある子要素の中で、最初に現れる要素に適用します。:nth-of-type(1)を指定した時と同じ結果が返されます。CodePen.サンプルでは最初の1行だけボーダーを消しています。{}同じ親要素の中にある子要素の中で最後に現れる要素に適用します。:nth-last-of-type(1)を指定した時と同じ結果が返されます。CodePen.この疑似クラスは後から数えるだけで:first-of-type()と書式は同じです。{}同じ親要素の中にある子要素の中で、最後に現れる要素に適用します。:first-childと逆で:nth-last-child(1)を指定した時と同じ結果が返されます。CodePen.:last-childは要素内で最後に書かれている子要素に適用されます。:nth-last-child(1)と同じ結果が返ってきます。この疑似クラスは後から数えるだけで:first-childと書式は同じになります。{}親要素の中にある唯一の子要素に適用します。子要素が一つしかない場合のみ適用されます。CodePen.親要素divの中に子要素が一つしかないグループのp要素にだけCSSが適用されています。{}同じ親要素の中にある兄弟要素の中にその要素が一つしかない場合に適用します。:only-childと違って、他の種類の要素があってもその要素が一つしかなければ適用されます。CodePen.親要素divの中に子要素が一つしかないグループのp要素にだけCSSが適用されています。p要素以外の子要素があっても適用されます。{}要素内が空の要素に適用します。CodePen.空要素にだけスタイルが適用されます。{}アンカーリンクのリンク先の要素に適用されます。CodePen.アンカーリンクをクリックするとリンク先にスタイルが適用されます。{}テキストエリアなど無効になっていない要素に適用されます。CodePen.textareaが有効な場合は青色背景になるよう指定してあります。{}テキストエリアなど無効になっている要素に適用されます。CodePen.textareaが無効の場合はグレー背景になるよう指定してあります。{}ラジオボタンやチェックボックスがチェックされた時に適用されます。CodePen.チェックされたら右側にある文字の背景色がピンクに変わります。{}()内にセレクタを指定してそのセレクタに該当しない要素に対して適用します。CodePen.3番目のクラスdemo22にのみCSSが適用されました。{}最初の行にだけCSSが適用されます。CSS2の:first-lineと同じです。CSS3では疑似要素のコロンが2つになります。CodePen.CSSが適用されているので最初の行だけ色が変わっております。2行目以降色は変わっておりません。{}最初の1文字にだけCSSが適用されます。CSS2の:first-letterと同じです。CSS3では疑似要素のコロンが2つになります。CodePen.CSSが適用されているので最初の1文字だけ色が変わっております。2文字目以降は色は変わっておりません。{}contentプロパティで要素の直前にある内容に対して適用します。CSS2の:beforeと同じです。CSS3では疑似要素のコロンが2つになります。CodePen.::beforeを指定したp要素の最初にcontentで指定した内容が挿入されます。{}contentプロパティで要素の直後にある内容に対して適用します。CSS2の:afterと同じです。CSS3では疑似要素のコロンが2つになります。CodePen.::beforeを指定したp要素の最初と::afterを指定したp要素の最後にcontentで指定した内容が挿入されます。CSS3で追加されたセレクタは以上になります。レスポンシブデザインなどモバイル向けのサイト制作はセレクタを使うことによって格段にコーディングするのが楽になります。Webデザインラボ中の人NYのデザイン学校でグラフィックデザインを学んだ後、同じくNYにあるWeb制作会社にてインターンからWebデザイナーへ。同時期に米国永住権(グリーンカード)を取得。その後某旅行会社系のWebクリエーター兼社内インフラ担として働いた後、結婚を機に約12年に渡るアメリカ生活を終え日本に帰国。日本では某携帯キャリアの社内Webクリエーターとして勤務。Web系に携わる前はホノルル空港でGreeterとして働いていた経験や、アメリカ国内の衣料品を中心としたアパレル系のバイヤー経験もあり。趣味はお酒を飲みながらの家でまったり音楽鑑賞とアウトドア系全般。最近は自転車にもハマってます。更新情報はTwitterかFacebookで配信してるのでフォローして確認してみて。