TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS CSSで特定の要素を除外する方法を現役エンジニアが解説【初心者向け】
icon
icon
CSS

CSSで特定の要素を除外する方法を現役エンジニアが解説【初心者向け】

初心者向けにCSSで特定の要素を除外する方法について解説しています。最初に擬似クラスと擬似要素それぞれの役割について説明します。次に擬似クラスを使った要素の除外の例を見てみましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

CSSで特定の要素を除外する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

特定の要素を除外する方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

擬似クラスと擬似要素とは

「擬似クラス」と「擬似要素」は、どちらもCSSのセレクタの文法にて使用できるキーワードです。CSS2.1までは、擬似クラスと擬似要素の用語の定義や用途が曖昧でしたが、CSS3からは文法としても厳密に分けて使用することに決まっています。まずは、「擬似クラス」と「擬似要素」の基本の使用方法を説明します。

擬似クラス

要素の状態には、擬似的に体系付けられた名前（クラス）が識別子として定義されています。この擬似クラスを使用することにて、要素の状態によって、スタイルの適応の切替えができます。また、要素の特定の部分にだけ、スタイルの適応の範囲を限定することができます。

擬似要素

要素を部分的に参照するための擬似的な要素が定義されています。要素の特定の部分にだけ、スタイルの適応の範囲を限定することができます。擬似クラスの汎用的な使い方が可能になっているので、CSS2.1よりも擬似要素の使用頻度は低くなりました。

 

基本的な使い方

擬似クラス

セレクタに対して、「:（コロン）」を記述してから、擬似クラスの名前を記述します。例えば、aタグにて定義されているリンクに、マウスカーソルが乗せられた時だけにスタイルを適応させることができます。

擬似要素

セレクタに対して、「::（二つのコロン）」を記述してから、擬似要素の名前を記述します。例えば、pタグにて定義されている文言の頭文字だけにスタイルを適応させることができます。

 

[PR] Webデザインで副業する学習方法を動画で公開中

様々な除外の指定方法

一定の範囲内に適応されているスタイルをおもに擬似クラスも用いて、部分的に適応範囲外として見せれます。

 

特定の要素を除外して実装してみよう

一定の範囲内に適応されているスタイルが定義されたセレクタを記述しておきます。次に、擬似クラスには、別のスタイルを定義します。

サンプルコードの表示として、各項目に下線を引いてから、項目の最後の要素だけ下線を取り除いています。

 

監修してくれたメンター

井内洋平

TechAcademyの現役メンター。

元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

CSSにおけるアスタリスクの使い方を現役エンジニアが解説【初心者向け】

CSSにおけるアスタリスクの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。  ...
CSS

CSSで画像の下に隙間ができる原因と消す方法を現役エンジニアが解説【初心者向け】

CSSで画像の下に隙間ができる原因と消す方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
CSS

圧縮されたCSSを元に戻すツール10選を現役エンジニアが紹介【初心者向け】

圧縮されたCSSを元に戻すツール10選について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそ...
CSS

先頭にマーカーを表示させよう！CSSのlist-styleの使い方【初心者向け】

今回の記事では、CSSでマーカー（リストの先頭の記号や数字）を設定するlist-styleについて解説します。 HTMLのリストを利用する際に、先頭に●や...
CSS

スタイルシート（CSS）の基本的な書き方【初心者向け】

本記事ではCSS（カスケーディングスタイルシート）の基本的な書き方について初心者向けに解説します。 【動画の解説はこちら】   ...
CSS

CSSのbeforeで改行する方法を現役エンジニアが解説【初心者向け】

CSSのbeforeで改行する方法について解説します。 そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理...
CSS

あわせてよく読まれている記事

CSSの疑似要素を現役エンジニアが解説【初心者向け】

CSSの疑似要素について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 疑似要素について詳しく説明していくね！ 大石ゆかり お願いします！   目次 疑似要素とは 疑似要素を使う場面 主な疑似要素の解説 疑似要素を使ってみよう まとめ   疑似要素とは 疑似要素とはCSSセレクタで指定した要素の特定の部分を指し示すものです。疑似要素を使用すると「1行目」や「最初の文字」といった具体的な要素や、「最初の子要素」などのような相対的な表現で要素を指し示すことができます。   [PR] Webデザインで副業する学習方法を動画で公開中疑似要素を使う場面 「1行目」や「要素の前」などは疑似要素を使わないと表現できません。その性質を利用して疑似要素はレイアウトの調整やアニメーションなど、多くの場面で用いられています。本来であれば細かなスタイルやCSSセレクタによる調整が必要な場面において疑似要素を使用すると簡潔に対象を指し示すことができ、CSSを簡潔に記述できるというメリットがあります。   主な疑似要素の解説 主な疑似要素としては以下のようなものがあります。 ::after：指定した要素に対する最後の子要素を示します ::before：指定した要素に対する最後の子要素を示します ::selection：テキストを含む要素に対してユーザーが選択した部分を指し示します 疑似要素はこの他にも多くの種類があります。疑似要素について、詳しくは以下の記事も参考にしてください MDN – 疑似要素(Pseudo-elements)   疑似要素を使ってみよう 今回のサンプルプログラムでは疑似要素の使い方について確認します。文章は銀河鉄道の夜から引用しています。 銀河鉄道の夜（青空文庫） index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Sample</title> <style> div { width: 20vw; } p::first-letter { font-size: 3rem; } </style> </head> <body> <h1>銀河鉄道の夜</h1> <div> <p>ではみなさんは、そういうふうに川だと云いわれたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。<br>先生は、黒板に吊つるした大きな黒い星座の図の、上から下へ白くけぶった銀河帯のようなところを指さしながら、みんなに問といをかけました。</p> </div> </body> </html> 実行結果は以下のとおりです。海外のブログなどで見かける表現ですね。疑似要素を使うとこのような表現を簡単に行うことができます。   まとめ 今回の記事ではCSSの疑似要素について学習しました。   監修してくれたメンター 太田和樹（おおたかずき） ITベンチャー企業のPM兼エンジニア 普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。 開発実績：画像認識技術を活用した駐車場混雑状況把握、音声認識を活用したヘルプデスク支援システム、ロボットアプリの開発、大規模基幹系システムの開発・導入マネジメント。著書「知識ゼロからの機械学習入門（技術評論社）」。 地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
CSS

CSSのリンクの色を変えない方法を現役エンジニアが解説【初心者向け】

CSSのリンクの色を変えない方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次擬似クラスと擬似要素とは基本的な使い方様々な除外の指定方法特定の要素を除外して実装してみよう監修してくれたメンター そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 CSSのリンクの色を変えない方法について詳しく説明していくね！ 大石ゆかり お願いします！   リンクの色とは リンクとは、今表示されているページ上で、他のページに移動できるURLが含まれた場所です。   例えば1をクリックすると、https://techacademy.jp/magazine/category/webdesign/css　というページに移動します。 2をクリックすると、現在ご覧いただいているページである、https://techacademy.jp/magazine/21233　に移動します。   リンクの色とは、3（以下の画像）のようにページ内の文字に対してリンクを指定する場合、文字色が黒色からリンクを表す色に変化した状態（画像では青色）で表示されることを意味します。   リンクの色が変わってしまう原因 未訪問のサイトと訪問済みのサイトでリンクの色が異なっていることや、マウスカーソルを当てた際、マウスクリックした際にリンクの色が変わることがあります。 これらはaタグの:link, :visited, :hover, :active擬似クラスの設定が原因です。 :linkは未訪問のリンク、:visitedは訪問済みのリンク、:hoverはマウスカーソルが当たっているリンク、:activeはマウスクリック中のリンクを指します。   [PR] Webデザインで副業する学習方法を動画で公開中リンクの色が変わらないためにすること 「aタグの色を指定して、各擬似クラスの設定は行わない」という方法と、「すべての擬似クラスで同じ色を指定する」という方法があります。 「aタグの色を指定して、各擬似クラスの設定は行わない」場合には、以下のようにaタグで色指定するだけで良いです。 a { color: blue; }   「すべての擬似クラスで同じ色を指定する」場合には、:link, :visited, :hover, :active擬似クラスで同じ色を指定すれば良いです。 a:link, a:visited, a:hover, a:active { color: blue; }   基本動作を実際に書いてみよう まずはデフォルト動作を見てみましょう。 リンクの訪問や、マウスホバー、クリックでリンクの色が変わります。 ※CodePenでは、標準でマウスホバーやクリックで色が変わらないため、:hoverと:activeの設定をしています。   HTML <a href="https://techacademy.jp/programming" target="_blank" rel="noopener noreferrer"> <p>標準リンク(リンク訪問や、マウスホバー、クリックで色が変わる)</p> </a>   CSS a:hover { color: red; } a:active { color: green; }   CSS解説 1行目のa:hover {では、HTMLの aタグで囲まれた標準リンク(リンク訪問や、マウスホバー、クリックで色が変わる) 　という文字の上に、マウスカーソルを移動させた場合に、color: red;で色を赤色にするように指定しています。 4行目のa:active {では、HTMLの aタグで囲まれた標準リンク(リンク訪問や、マウスホバー、クリックで色が変わる) 　をクリックしたとき、color: green;で色を緑色にするように指定しています。 aタグのことをアンカータグといいます。 実行結果 See the Pen link1 by マインクラフトゲームアプリプログラミング学校 (@programjp) on CodePen.   各擬似クラスの設定は行わない方法 次に「aタグの色を指定して、各擬似クラスの設定は行わない」方法です。 no-color-changeクラスで色を一括指定しています。 リンクの色が変わらないことを確認しましょう。   HTML <a href="https://techacademy.jp/programming" target="_blank" rel="noopener noreferrer"> <p>色の変わるリンク(リンク訪問や、マウスホバー、クリックで色が変わる)</p> </a> <a
CSS

CSSの否定疑似クラス:notの使い方を現役エンジニアが解説【初心者向け】

CSSの否定疑似クラス:notの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 否定疑似クラス:notの使い方について詳しく説明していくね！ 大石ゆかり お願いします！   目次 否定疑似クラス(:not)とは 便利な使い方（使うと便利な場面） 否定疑似クラスを使ってみよう まとめ   否定疑似クラス(:not)とは 否定擬似クラスとは、指定されたCSSセレクタに「該当しない」要素を指し示します。否定擬似クラスは以下のように使用します。 :not(CSSセレクタ) {   /* 否定擬似クラスに該当した要素に適用するCSS */ }   [PR] Webデザインで副業する学習方法を動画で公開中便利な使い方（使うと便利な場面） 否定擬似クラスは、特定の要素にだけCSSを適用したくない場合に利用すると便利です。否定擬似クラスについて、詳しくは以下の記事も参考にしてください。 MDN – :not()   否定疑似クラスを使ってみよう 今回のサンプルプログラムでは否定擬似クラスの使い方について確認します。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Sample</title> <style> .parent { background-color: pink; border: dashed 2px red; width: 10vw;
CSS

CSSの擬似クラスhasの使い方を現役エンジニアが解説【初心者向け】

将来的に対応予定のCSSの擬似クラスhasの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 新しいCSSの技術をいち早く知りたいという方におすすめの記事です。なお、現在多くのブラウザで普及しているCSS3では対応していない機能なのでご注意ください。   そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 擬似クラスhasの使い方について詳しく説明していくね！ 大石ゆかり お願いします！ 目次 擬似クラスhasとは 擬似クラスhasの書き方 実際に書いてみよう   擬似クラスhasとは 疑似クラスhasは、リレーショナル疑似クラスとも呼ばれるセレクタです。指定した要素を含む要素を選択するセレクタで、つまり要素の関連によって要素を選択できます。 2020年現在は、JavaScriptでのみ使えるセレクタの記法で、CSSはで使うことができません。しかしCSSの開発者コミュニティ「CSS Working Group Editor Drafts」にて、「Selectors Level 4」という次期バージョンでの対応が予告されています。 将来的に、CSSでも使うことができるのではないか、と期待されています。   [PR] Webデザインで副業する学習方法を動画で公開中擬似クラスhasの書き方 疑似クラスhasの基本的な文法はこのようになります。 selectorA:has(selectorB) selectorAのなかで、子孫要素にselectorBを持っている要素を選択する、という形ですね。   例えば、下記のように記載することができます。   section:has(.logo) sectionタグの子孫要素にlogoクラスがある要素を選択しています。   a:has(> h2) 子要素がh2タグになっているaタグを選択しています。   input:has(+ button) 直後にbutton要素が続くinput要素を選択しています。   div:has(.thumbnail, .description) thumbnailクラスとdescriptionクラス双方を含むdivを選択しています。   これを見るだけでも、Webデザインの幅がかなり広がりそうですね。   実際に書いてみよう 疑似クラスhasは、単体でも強力ですが、他のセレクタと組み合わせることで本領を発揮します。   例えば、ラジオボタンで画面全体の色を切り替えるセレクタを考えてみます。 /*青のラジオボタン #color-blue が選択されていた場合*/ :root:has(#color-blue:checked) .main-color { 　　/*メインカラー*/ 　　background-color : darkblue; } :root:has(#color-blue:checked) .accent-color { 　　/*アクセントカラー*/ 　　color : deepskyblue; } /*緑のラジオボタン #color-green が選択されていた場合*/ :root:has(#color-green:checked) .main-color { 　　/*メインカラー*/ 　　background-color : darkgreen; } :root:has(#color-green:checked) .accent-color { 　　/*アクセントカラー*/ 　　color : springgreen; }   とても簡単に記載することができました。 疑似クラスrootで、画面全体の要素を選択することができます。rootに:hasとcheckedを用いて、ボタンがチェックされている場合、という条件をつけました。そして、子孫セレクタを用いることで、画面上すべての要素から目的のクラスだけを選択しています。 複雑な処理も簡単に記載できる疑似クラスhas。様々なブラウザで普及する日が待ち遠しいですね。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
CSS

擬似要素を使いこなそう！CSSのbefore/afterの使い方【初心者向け】

CSSで書く::before,::aterの使い方を解説している記事になります。 全くの初心者という方が今すぐ覚える必要のある知識ではありませんが、サイト制作をする上で重要なものになりますので今覚えておくと良いでしょう。 文頭に固定で何か文字を置いたり、リストで並べた際に役に立つはずです。   なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。   なお、今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。 田島悠介 今回は疑似要素の中から、beforeとafterを使ってみよう。 大石ゆかり 田島メンター！！疑似要素というのは何ですか～？ 田島悠介 セレクタの後ろに追加で記述して、その要素の一部分にスタイルを適用させることができるものなんだ。今回使うbeforeとafterは、要素の前や後に文字や画像を入れる疑似要素だね。 大石ゆかり なるほど、そんなこともできるんですね。よろしくお願いします！   before/afterとは beforeとafterは、セレクタに追加して条件を指定する擬似要素です。擬似クラスが要素全体にスタイルを適用するのに対して、擬似要素は要素の一部分にスタイルを適用します。 「before」は要素の前、「after」は要素の後ろに追加の要素を入れることができます。 見出しの前に同じ記号を付けたり、画像を挿入したい時などにも活用できます。   before/afterの書き方 before/afterは以下のように記述します。 要素::before {content:挿入する内容;} 要素::after {content:挿入する内容;} content:の部分には挿入したい内容を入力します。 contentに文字や記号を挿入する場合は、それらを“”で囲って入力します。 contentに画像や音声を挿入する場合は、url(対象へのパス)を入力します。 同じ要素に対してbeforeとafterの両方を指定することも可能です。 CSS3からbefore・afterなどの擬似要素には::(ダブルコロン)を使用しますが、コロンが1つの場合でもほとんどのブラウザで正常に機能するようになっています。   サポートブラウザ 「::before, ::after擬似要素」をサポートするブラウザは以下の通りとなっています。 Chrome Firefox3.5~ Safari4~ IE8~ Opera6~   田島悠介 before/afterの基本的な書き方だよ。 大石ゆかり セレクタの後ろに”::before”、”::after”のように追記して、contentの値に入れたい文字や画像を指定するんですね。 田島悠介 beforeとafterは同じ要素に両方適用させることもできるんだ。次は実際にコンテンツを挿入して、画面で確かめてみよう。   [PR] Webデザインで副業する学習方法を動画で公開中実際にbefore/afterを書いてみよう 次のHTMLファイルにbefore/afterを適用します。 (※htmlとcssファイルが同じディレクトリ内にあり、外部スタイルシートのファイル名が”sample.css”である場合の例です) HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <h3>見出しの前に記号を入れる</h3> <p>段落の前に画像を入れる</p> </body> </html> CSS h3::before {content:"◆";} p::before {content:url(photo1.png);} ここでは<h3>の見出しの前に記号”◆”が入るように記述し、<p>の段落の前には同じディレクトリ内にアップロードしている画像ファイル「photo1.png」が入るようにパスを設定しています。 画面ではこのように表示されます。 見出しの前に”◆”が、段落の文章の前には画像ファイルが挿入されました。   次に、beforeとafterを同じ要素に同時に使用した場合の例です。 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="sample.css" type="text/css"> </head>
CSS

擬似クラス！CSSでnth-of-typeを使う方法【初心者向け】現役エンジニアが解説

CSSでnth-of-typeを使って、特殊な「擬似クラス」を使う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次擬似クラスと擬似要素とは基本的な使い方様々な除外の指定方法特定の要素を除外して実装してみよう監修してくれたメンター そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。   【動画の解説はこちら】   田島悠介 今回はnth-of-typeという擬似クラスを使ってみよう。擬似クラスは、セレクタのうしろに追記することで要素の中でさらに条件をつけることができるものだよ。 大石ゆかり 田島メンター！nth-of-typeはどういった条件を指定できるんですか〜？ 田島悠介 指定した要素が親要素から見て、同じ種類の要素のみを数えたとき何番目になるかというのを見るんだ。まずは基本の書き方を見てみよう。 大石ゆかり 分かりました！   nth-of-typeとは nth-of-typeとは、指定した要素のうちx番目の要素を選択し、CSSに適用するための擬似クラスです。 擬似クラスとは、指定した要素の一部にCSSを反映できる方法を指します。   以下、コード例です。 //兄弟関係にある<span>のうちx番目の<span>を選択 span:nth-of-type(x){ 〜 } <span>要素の数だけを数えて、x番目の<span>要素のみを選択します。 疑似クラスについて詳しく学びたい方は、HTML5で定義された擬似クラスをご覧ください。   nth-of-typeの書き方 「nth-of-type(2n)」の前に「：」（ｺﾛﾝ）がついていることに注目してください。 li:nth-of-type(2n){   /*適用する内容*/ } ( )内部の「n」を使って、何番目であるかを記しています。 今回は「2n」番目であることから、2の倍数である偶数番目に適用されます。 また、「3n-1」や「odd」「even」という指定もできます。 「odd」「even」はそれぞれ奇数、偶数という指定方法です。   田島悠介 ()内で指定された部分にのみ、スタイルが適用されるんだ。 大石ゆかり この場合は偶数が対象ということですね。 田島悠介 次は実際の例で見てみよう。今回はリスト項目の指定の部分のみ、色を変えるというのをやってみるよ。   [PR] Webデザインで副業する学習方法を動画で公開中実際に書いてみよう 実際にHTMLとCSSを書いてみましょう。 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS nth-of-type</title> <link rel="stylesheet" type="text/css" href="sample.css"> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li>
CSS

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

テックアカデミーGAIナレッジベース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS CSSで特定の要素を除外する方法を現役エンジニアが解説【初心者向け】