HTML5プロフェッショナル認定試験 レベル1「CSSの基本とカスケード」の一問一答

HTML5プロフェッショナル認定試験 レベル1のCSSの基本とカスケードに関する一問一答（全75問）の正解と解説の一覧です。上の一問一答で実際に解いてから、ここで復習・確認できます。

1. 問1．タイプセレクタ(要素セレクタ)は、指定した名前のHTML要素すべてにスタイルを適用する。

   正解：○（正しい）

   解説：pやdivなど要素名を指定し、その種類の全要素を対象とするのがタイプセレクタである。

2. 問2．CSSのコメントは、//で始め行末までが対象となる。

   正解：×（誤り）

   解説：誤り。CSSのコメントは /* ... */ で囲む形式のみで、複数行にまたがって書ける。//で始める行コメントはJavaScriptなどの記法であり、CSSでは解釈されずスタイルが壊れる原因になる。

3. 問3．クラスセレクタは、セレクタ名の前にシャープ記号(#)を付けて記述する。

   正解：×（誤り）

   解説：誤り。正しくは、クラスセレクタはピリオド(.)を前に付ける。#はIDセレクタである。

4. 問4．!importantを付けた宣言は、通常の詳細度の計算を上書きして優先的に適用される。

   正解：○（正しい）

   解説：!importantを付けた宣言は、詳細度やソース順よりも先に評価され、通常の宣言をすべて上回る。ただし多用すると、後から上書きするにはさらに!importantが必要になり保守が困難になるため、使用は最小限にとどめるのが原則。

5. 問5．:visited疑似クラスは、まだ訪問していないリンクを選択する。

   正解：×（誤り）

   解説：誤り。正しくは、:visitedは訪問済みのリンクを選択する。未訪問は:linkである。

6. 問6．background(背景)プロパティは、子要素に継承される。

   正解：×（誤り）

   解説：誤り。backgroundは継承しないプロパティ。子要素の背景が親と同じに見えるのは、初期値のtransparentによって親の背景が透けているだけで、値が受け継がれているわけではない。継承するのは文字色やフォントなどテキスト関連のプロパティが中心。

7. 問7．@import規則は、内部スタイルシート(<style>)の中では使用できない。

   正解：×（誤り）

   解説：誤り。@importはstyle要素内でも使用できるが、他の規則より前（@charsetの直後）に書く必要がある。ただし読み込みが直列になり表示が遅れるため、実務ではlink要素で並列に読み込むほうが推奨される。

8. 問8．外部スタイルシートをHTMLに適用するには、head要素内で<link rel="stylesheet" href="style.css">のように記述する。

   正解：○（正しい）

   解説：link要素のrel属性にstylesheetを指定し、hrefでCSSファイルを参照する正しい記述である。

9. 問9．同じid属性値を1つのHTML文書内で複数の要素に付けてもよい。

   正解：×（誤り）

   解説：誤り。id属性の値は文書内で一意でなければならない。重複するとページ内リンクやgetElementByIdが最初の1つしか参照できず、意図しない動作になる。複数の要素をまとめて指定したい場合はclass属性を使う。

10. 問10．:last-child疑似クラスは、兄弟要素の中で最後の子要素を選択する。

    正解：○（正しい）

    解説：:last-childは、同じ親を持つ兄弟の中で最後に位置する子要素にマッチする。要素の種類を問わず「最後の子」であることが条件なので、最後の子が別の要素だと期待どおりに当たらない。種類を限定したい場合は:last-of-typeを使う。

11. 問11．隣接兄弟結合子(+)は、指定要素の直後にある同じ親を持つ兄弟要素を選択する。

    正解：○（正しい）

    解説：隣接兄弟結合子（+）は、同じ親を持ち、直前に指定要素が来る「直後の1つ」の兄弟だけを選ぶ。たとえば h2 + p は見出しのすぐ後ろの段落だけに当たり、2つ目以降の段落には当たらない。後続すべてを選ぶには間接兄弟結合子（~）を使う。

12. 問12．border(境界線)プロパティは、子要素に継承されるプロパティである。

    正解：×（誤り）

    解説：誤り。borderは継承しないプロパティ。もし継承すると入れ子になった要素すべてに枠線が描かれて意図しない見た目になるため、ボックスの見た目に関わるプロパティ（border・margin・padding・backgroundなど）は継承しない設計になっている。

13. 問13．@import規則は、スタイルシート内で他のすべてのCSS規則よりも後ろに記述しなければならない。

    正解：×（誤り）

    解説：誤り。正しくは、@importは@charsetを除く他のすべての規則よりも前(先頭)に記述する必要がある。

14. 問14．::first-line疑似要素は、ブロック要素の最初の行にスタイルを適用する。

    正解：○（正しい）

    解説：::first-lineはブロックレベル要素の最初の1行にスタイルを適用する疑似要素。何文字目までが1行かはウィンドウ幅やフォントサイズで変わるため、対象範囲は表示状況に応じて動的に決まる。適用できるプロパティはフォントや色など一部に限られる。

15. 問15．HTML文書内に直接CSSを記述する内部スタイルシートは、<style>要素を使い通常はhead要素内に置く。

    正解：○（正しい）

    解説：style要素にCSSを直接書く方法で、そのページだけに適用したい場合に使う。読み込み順の関係でhead要素内に置くのが一般的。複数ページで共有するなら外部ファイルにしてlink要素で読み込むほうが、キャッシュが効き保守もしやすい。

16. 問16．link要素はbody要素内にのみ記述できる。

    正解：×（誤り）

    解説：誤り。正しくは、スタイルシート読み込みのlink要素は通常head要素内に記述する。

17. 問17．::before疑似要素は、要素の内容の前にコンテンツを生成して挿入する。

    正解：○（正しい）

    解説：::beforeはcontentプロパティと組み合わせ要素内容の前に生成内容を挿入する。

18. 問18．:link疑似クラスは、まだ訪問していないリンクを選択する。

    正解：○（正しい）

    解説：:linkはまだ訪問していないリンクにマッチする疑似クラス。訪問済みは:visitedで、両者は排他的な関係にある。なお履歴の漏洩を防ぐため、:visitedに指定できるプロパティは色など一部に制限されている。

19. 問19．font-sizeプロパティは、子要素に継承されないプロパティである。

    正解：×（誤り）

    解説：誤り。font-sizeは継承するプロパティ。フォント・文字色・行の高さ・文字揃えといったテキスト関連は、いちいち指定し直さずに済むよう継承する設計になっている。継承しないのはbox関連（margin・padding・border・background）が中心。

20. 問20．a:hover, a:focusのように疑似クラスを含むセレクタはグループ化(カンマ区切り)できない。

    正解：×（誤り）

    解説：誤り。疑似クラスを含むセレクタもカンマで区切ってグループ化できる。ただしグループ内に1つでも不正なセレクタがあると、その規則全体が無視される点には注意が必要。

21. 問21．インラインスタイル(style属性)は、IDセレクタによる指定よりも詳細度が低い。

    正解：×（誤り）

    解説：誤り。詳細度はインラインスタイル＞IDセレクタ＞クラス・属性・疑似クラス＞要素・疑似要素の順で高く、style属性が最も強い。これを上回れるのは!important付きの宣言だけである。

22. 問22．複数のセレクタにまとめて同じスタイルを適用するには、セレクタをカンマ(,)で区切る。

    正解：○（正しい）

    解説："h1, h2, h3"のようにカンマで区切るとグループ化され同じ宣言が適用される。

23. 問23．:first-child疑似クラスは、兄弟要素の中で最後の子要素を選択する。

    正解：×（誤り）

    解説：誤り。正しくは、:first-childは最初の子要素を選択する。最後はlast-childである。

24. 問24．ユニバーサルセレクタ(*)は、ルート要素にのみマッチする。

    正解：×（誤り）

    解説：誤り。ユニバーサルセレクタ（*）はすべての要素にマッチする。ルート要素だけを選ぶのは:root疑似クラス（HTMLではhtml要素）である。*はリセットCSSなどで全要素にまとめて指定する用途で使われる。

25. 問25．子結合子(>)は、指定要素の直接の子要素のみを選択する。

    正解：○（正しい）

    解説：子結合子（>）は直接の子要素だけを選び、孫以降には当たらない。たとえば ul > li は入れ子になった内側のリストのliには適用されない。すべての子孫を対象にしたい場合は半角スペースで区切る子孫結合子を使う。

26. 問26．:nth-child(2n+1)は偶数番目の子要素を選択する。

    正解：×（誤り）

    解説：誤り。正しくは、2n+1はn=0,1,2…で1,3,5…となり奇数番目を選択する。

27. 問27．インラインスタイル(style属性)では、セレクタを記述する必要がない。

    正解：○（正しい）

    解説：style属性はその要素自身にだけ適用されるため、どの要素を対象にするかを示すセレクタは不要で、プロパティと値の宣言だけを書く。ただしHTMLと見た目が混ざって保守しにくく、詳細度も最強になるため、原則は外部スタイルシートを使う。

28. 問28．子孫結合子は、セレクタ間を半角スペースで区切って表す。

    正解：○（正しい）

    解説：子孫結合子は半角スペースで区切って書き、階層の深さを問わずその要素の中にあるすべての子孫にマッチする。div p なら、div直下のpも、div内のsection内のpも対象になる。直接の子だけに限定したい場合は子結合子（>）を使う。

29. 問29．:checked疑似クラスは、チェックされたチェックボックスやラジオボタンを選択する。

    正解：○（正しい）

    解説：:checkedはチェックされたチェックボックス・選択されたラジオボタン・選択状態のoption要素にマッチする。これを隣接兄弟結合子などと組み合わせると、JavaScriptを使わずにCSSだけで開閉表示などの動きを作れる。

30. 問30．詳細度が同じ宣言が複数ある場合、後に記述された宣言が優先される(ソース順)。

    正解：○（正しい）

    解説：カスケードは、まず!importantの有無、次にセレクタの詳細度、それでも決まらなければ記述順で優先度を決める。したがって詳細度が同じなら後に書かれた宣言が勝つ。上書き用のCSSを後に読み込ませるのはこの性質を利用したもの。

31. 問31．間接兄弟結合子(~)は、指定要素の直後の1つの兄弟要素だけを選択する。

    正解：×（誤り）

    解説：誤り。間接（一般）兄弟結合子（~）は、同じ親を持ち後に続く兄弟要素をすべて選択する。直後の1つだけに限定するのは隣接兄弟結合子（+）のほうである。

32. 問32．:nth-child(2n)は、偶数番目の子要素を選択する。

    正解：○（正しい）

    解説：2nはn=0,1,2…で2,4,6…となり偶数番目の子要素にマッチする。

33. 問33．[href$=".pdf"]は、href属性の値が.pdfで終わる要素を選択する。

    正解：○（正しい）

    解説：属性セレクタの $= は、属性値が指定した文字列で終わる要素にマッチする。[href$=".pdf"] ならPDFへのリンクだけを選べるので、アイコンを付けるといった用途に使える。^= は前方一致、*= は部分一致。

34. 問34．[class*="btn"]は、class属性の値にbtnという文字列を含む要素を選択する。

    正解：○（正しい）

    解説：属性セレクタの *= は、属性値のどこかに指定文字列を含む要素にマッチする。[class*="btn"] は btn-primary でも large-btn でも当たる。単語単位で一致させたい場合は ~= を使う。

35. 問35．[href^="https"]は、href属性の値がhttpsで終わる要素を選択する。

    正解：×（誤り）

    解説：誤り。正しくは、^=は値が指定文字列で始まる要素を選択する。終わるのは$=である。

36. 問36．ユニバーサルセレクタはアスタリスク(*)で表し、すべての要素を対象とする。

    正解：○（正しい）

    解説：ユニバーサルセレクタ（*）はすべての要素にマッチする。ブラウザ既定の余白をそろえるリセットCSSなどで使われるが、対象が多く詳細度は0なので、他の指定に簡単に上書きされる点も理解しておく。

37. 問37．font-familyプロパティは、子要素に継承される。

    正解：○（正しい）

    解説：font-familyは継承するプロパティ。body要素にまとめて指定しておけば文書全体に行き渡るため、要素ごとに書き直す必要がない。文字色・font-size・line-height・text-alignなどテキスト関連も同様に継承する。

38. 問38．特定の要素にのみスタイルを適用するインラインスタイルは、要素のstyle属性に記述する。

    正解：○（正しい）

    解説：style属性に直接 color:red; のように宣言を書く方法で、その要素だけに適用される。セレクタが不要な反面、詳細度が最も高くなり後から上書きしにくいうえ、構造と見た目が混在して保守性が落ちるため、原則は外部スタイルシートを使う。

39. 問39．text-alignプロパティは継承しないため、親で指定しても子の文字配置には影響しない。

    正解：×（誤り）

    解説：誤り。text-alignは継承するプロパティで、親に指定すれば子孫のテキストにも及ぶ。テキスト関連（font系・color・line-height・text-alignなど）は継承し、ボックス関連（margin・padding・border・background）は継承しない、と整理して覚える。

40. 問40．margin(外側の余白)プロパティは、子要素に継承される。

    正解：×（誤り）

    解説：誤り。marginは継承しないプロパティ。もし継承すると入れ子の要素すべてに余白が加算されてレイアウトが破綻するため、ボックスの寸法に関わるプロパティは継承しない設計になっている。

41. 問41．CSSの詳細度において、IDセレクタはクラスセレクタよりも優先度が高い。

    正解：○（正しい）

    解説：詳細度はインラインスタイル＞ID＞クラス・属性・疑似クラス＞要素・疑似要素の順。IDは文書内で一意な要素を指すぶん意図が明確なので、クラスより強い重みが与えられている。数の多寡ではなく上位のカテゴリが1つでも多いほうが勝つ点に注意。

42. 問42．同一の宣言ブロック内で同じプロパティを2回指定した場合、先に書いた値が優先される。

    正解：×（誤り）

    解説：誤り。同じ宣言ブロック内で同じプロパティを複数回書いた場合は、後に書いた値が勝つ。これは詳細度が等しいときソース順で決まるというカスケードの原則どおりで、古いブラウザ向けの記述を先に、新しい記述を後に書くフォールバックの手法もこの性質を利用している。

43. 問43．IDセレクタは、セレクタ名の前にシャープ記号(#)を付けて記述する。

    正解：○（正しい）

    解説：IDセレクタは #intro のようにシャープ記号を前に付ける。ピリオド（.）はクラスセレクタ、記号なしは要素セレクタで、記号によって対象が変わる。id属性の値は文書内で一意でなければならない点もあわせて押さえる。

44. 問44．:not(.active)は、activeクラスを持つ要素のみを選択する。

    正解：×（誤り）

    解説：誤り。正しくは、:not()は括弧内の条件に合致しない要素を選択する否定疑似クラスである。

45. 問45．::first-letter疑似要素は、ブロック要素の最初の単語にスタイルを適用する。

    正解：×（誤り）

    解説：誤り。::first-letterが対象とするのは最初の1文字で、単語単位ではない。雑誌のようなドロップキャップ（先頭文字を大きく飾る表現）に使われる。最初の1行を対象とするのは::first-lineである。

46. 問46．次のうち、クラスセレクタの正しい記述はどれか。

    • ア．.menu
    • イ．#menu
    • ウ．menu
    • エ．*menu

    正解：ア．.menu

    解説：クラスセレクタはピリオドを前に付けて .menu と書く。#menu はIDセレクタ、menu は要素セレクタ（menu要素）を意味し、*menu という記法はCSSに存在しない。クラスは同じ文書内で何度でも使える点がIDとの違い。

47. 問47．次のうち、属性値が指定文字列で「始まる」要素を選択する属性セレクタはどれか。

    • ア．[href^="a"]
    • イ．[href*="a"]
    • ウ．[href$="a"]
    • エ．[href~="a"]

    正解：ア．[href^="a"]

    解説：^= は属性値が指定文字列で始まる（前方一致）要素を選択する。[href^="https"]で外部リンクだけを選ぶ、といった使い方ができる。*= は部分一致、$= は後方一致、~= はスペース区切りの単語単位の一致を表す。

48. 問48．次のうち、要素の最初の1文字にスタイルを適用する疑似要素はどれか。

    • ア．::first-letter
    • イ．::before
    • ウ．::after
    • エ．::first-line

    正解：ア．::first-letter

    解説：::first-letterは要素内の最初の1文字にスタイルを適用する疑似要素で、先頭文字を大きく飾るドロップキャップなどに使う。::first-lineは最初の1行、::beforeと::afterは要素内容の前後に生成内容を挿入するもので、対象が異なる。

49. 問49．次のうち、子結合子を表す記号はどれか。

    • ア．>
    • イ．+
    • ウ．~
    • エ．

    正解：ア．>

    解説：子結合子は > で、直接の子要素だけを選択する。+ は直後の1つの兄弟、~ は後続の兄弟すべて、半角スペースは階層を問わない子孫を表し、記号ごとに選択範囲が異なる。

50. 問50．詳細度が最も高いのはどれか。

    • ア．インラインスタイル(style属性)
    • イ．クラスセレクタ
    • ウ．IDセレクタ
    • エ．要素セレクタ

    正解：ア．インラインスタイル(style属性)

    解説：詳細度はインラインスタイル（style属性）＞IDセレクタ＞クラス・属性・疑似クラス＞要素セレクタの順で高い。style属性は対象が1要素に限定され意図が最も明確なため最強とされ、これを上回れるのは!important付きの宣言だけである。

51. 問51．次のセレクタのうち、隣接兄弟結合子を使っているものはどれか。

    • ア．h2 + p
    • イ．h2 p
    • ウ．h2 > p
    • エ．h2 ~ p

    正解：ア．h2 + p

    解説：h2 + p の + が隣接兄弟結合子で、h2の直後にある1つのp要素だけを選ぶ。h2 p は子孫、h2 > p は直接の子、h2 ~ p は後続の兄弟すべてを表し、それぞれ選択範囲が異なる。

52. 問52．外部スタイルシートを読み込むための正しいlink要素はどれか。

    • ア．<link rel="stylesheet" href="a.css">
    • イ．<link rel="style" src="a.css">
    • ウ．<style src="a.css">
    • エ．<css href="a.css">

    正解：ア．<link rel="stylesheet" href="a.css">

    解説：外部スタイルシートは <link rel="stylesheet" href="a.css"> と書く。関係を示すrelにstylesheetを指定し、参照先はhref属性で示す。srcは画像やスクリプトを埋め込む要素の属性で、link要素では使わない。style要素は外部ファイルを読み込めない。

53. 問53．次のうち、継承しないプロパティはどれか。

    • ア．margin
    • イ．color
    • ウ．font-size
    • エ．line-height

    正解：ア．margin

    解説：marginはボックス関連で継承しない。color/font-size/line-heightは継承する。

54. 問54．div.box p { } のセレクタの詳細度を構成する内訳として正しいのはどれか。

    • ア．ID1・要素2
    • イ．クラス1・要素2
    • ウ．クラス2・要素1
    • エ．ID1・クラス1

    正解：イ．クラス1・要素2

    解説：詳細度はID・クラス相当（クラス／属性／疑似クラス）・要素相当（要素／疑似要素）の3階層で数える。div.box p は .box がクラス1個、div と p が要素2個なのでクラス1・要素2となる。IDは含まれない。

55. 問55．次のうち、奇数番目の子要素を選択する記述として正しいものはどれか。

    • ア．:nth-child(even)
    • イ．:nth-child(odd)
    • ウ．:nth-child(2n)
    • エ．:last-child

    正解：イ．:nth-child(odd)

    解説：:nth-child(odd) が奇数番目、:nth-child(even) が偶数番目を選ぶ。an+b の形でも書け、oddは2n+1、evenは2nと同じ。表の行を交互に色分けするストライプ表示などで使われる。:last-childは最後の子で位置の偶奇とは無関係。

56. 問56．#main .item(ID1・クラス1)と .item.active(クラス2)が同じ要素にcolorを指定している。どちらが優先されるか。

    • ア．.item.active
    • イ．#main .item
    • ウ．ソース順で常に後者
    • エ．両方無効

    正解：イ．#main .item

    解説：#main .item はID1+クラス1、.item.active はクラス2。IDを含む前者が優先される。

57. 問57．次のうち、否定を表す疑似クラスはどれか。

    • ア．:checked
    • イ．:not()
    • ウ．:hover
    • エ．:nth-child()

    正解：イ．:not()

    解説：:not() は括弧内のセレクタに当てはまらない要素を選ぶ否定疑似クラス。li:not(:last-child) のように書けば「最後以外」に区切り線を付けるといった指定ができる。:checkedは選択状態、:hoverはポインタが乗った状態、:nth-child()は位置による選択。

58. 問58．ユニバーサルセレクタを表す記号はどれか。

    • ア．#
    • イ．*
    • ウ．.
    • エ．~

    正解：イ．*

    解説：* がすべての要素にマッチするユニバーサルセレクタ。# はID、. はクラス、~ は間接兄弟結合子を表す記号で、それぞれ役割が異なる。

59. 問59．a:link, a:visited, a:hover, a:active を記述する推奨順序(LVHA)として正しいものはどれか。

    • ア．hover→active→link→visited
    • イ．link→visited→hover→active
    • ウ．active→hover→visited→link
    • エ．visited→link→active→hover

    正解：イ．link→visited→hover→active

    解説：link→visited→hover→active（LVHA）の順に書く。詳細度が同じなので後に書いたほうが勝つため、順序を誤ると訪問済みリンクにhoverが効かないといった不具合が起きる。「LoVe HAte」と語呂で覚えるのが定番。

60. 問60．次のうち、内部スタイルシートを記述する要素はどれか。

    • ア．<link>
    • イ．<style>
    • ウ．<script>
    • エ．<css>

    正解：イ．<style>

    解説：内部スタイルシートはstyle要素にCSSを直接書く。link要素は外部ファイルの読み込み、script要素はJavaScriptの記述に使うもので、cssという要素は存在しない。style要素は通常head内に置く。

61. 問61．p#intro { } のセレクタの詳細度を構成する内訳として正しいものはどれか。

    • ア．クラス1・要素1
    • イ．ID1・要素1
    • ウ．ID2
    • エ．要素2

    正解：イ．ID1・要素1

    解説：p#intro は #intro がID1個、p が要素1個なので、詳細度はID1・要素1となる。クラスは含まれていない。詳細度はID・クラス相当・要素相当の3階層で数え、上位の階層が多いほうが優先される。

62. 問62．次のうち、属性値に指定文字列を「部分的に含む」要素を選択する属性セレクタはどれか。

    • ア．[class^="x"]
    • イ．[class$="x"]
    • ウ．[class*="x"]
    • エ．[class="x"]

    正解：ウ．[class*="x"]

    解説：*= は属性値のどこかに指定文字列を含む要素にマッチする部分一致。^= は前方一致、$= は後方一致、= は完全一致で、それぞれ照合の仕方が異なる。

63. 問63．次のうち、間接(一般)兄弟結合子を表す記号はどれか。

    • ア．+
    • イ．>
    • ウ．~
    • エ．

    正解：ウ．~

    解説：~（チルダ）が間接（一般）兄弟結合子で、同じ親を持つ後続の兄弟要素すべてにマッチする。+ は直後の1つだけ、> は直接の子、半角スペースは階層を問わない子孫を表す。

64. 問64．以下の指定で最終的にp要素のcolorはどうなるか。p { color: blue !important; } p { color: red; }

    • ア．red
    • イ．継承値
    • ウ．blue
    • エ．無効

    正解：ウ．blue

    解説：カスケードでは!importantの有無が詳細度やソース順より先に評価されるため、後から書かれたredではなく!important付きのblueが適用される。順序で上書きしたい場合は、後の宣言にも!importantを付ける必要がある。

65. 問65．次のうち、要素内容の前に生成内容を挿入する疑似要素はどれか。

    • ア．::after
    • イ．::first-line
    • ウ．::before
    • エ．::first-letter

    正解：ウ．::before

    解説：::beforeが要素内容の直前に生成内容を挿入する疑似要素で、content プロパティとセットで使う。::afterは直後に挿入、::first-lineは最初の1行、::first-letterは最初の1文字を対象とするもので、役割が異なる。

66. 問66．li:nth-child(3) が選択するのはどの要素か。

    • ア．2番目のli
    • イ．最初のli
    • ウ．3番目のli
    • エ．最後のli

    正解：ウ．3番目のli

    解説：:nth-child(3) は親要素から見て3番目の子要素を選ぶ。要素の種類を問わず順番だけで数えるため、間に別の種類の要素が挟まると期待とずれることがある。種類ごとに数えたい場合は:nth-of-type()を使う。

67. 問67．複数のセレクタにまとめてスタイルを適用する(グループ化する)際の区切り文字はどれか。

    • ア．セミコロン(;)
    • イ．スペース
    • ウ．カンマ(,)
    • エ．ピリオド(.)

    正解：ウ．カンマ(,)

    解説：複数のセレクタをカンマで区切ると、同じ宣言をまとめて適用できる。セミコロンは宣言どうしの区切り、半角スペースは子孫結合子、ピリオドはクラスセレクタを表す記号で、いずれもグループ化には使えない。

68. 問68．次の継承プロパティに関する記述のうち正しいものはどれか。

    • ア．borderは継承する
    • イ．marginは継承する
    • ウ．colorは継承する
    • エ．paddingは継承する

    正解：ウ．colorは継承する

    解説：colorなどテキスト関連は継承し、margin/border/paddingは継承しない。

69. 問69．input[type="text"] が選択するのはどの要素か。

    • ア．すべてのinput
    • イ．input以外の要素
    • ウ．type属性がcheckboxのinput
    • エ．type属性がtextのinput

    正解：エ．type属性がtextのinput

    解説：input[type="text"] は属性セレクタで、type属性の値がtextであるinput要素だけを選ぶ。input要素は type の値によってテキスト欄・チェックボックス・ボタンなど見た目も役割も変わるため、この書き方で対象を限定するのが定石。

70. 問70．#nav { color: red; } と nav { color: blue !important; } が同じnav要素に適用される場合、色はどうなるか。

    • ア．red
    • イ．無効
    • ウ．ソース順で後者
    • エ．blue

    正解：エ．blue

    解説：!importantは詳細度の比較より先に評価されるため、要素セレクタの指定であってもIDセレクタの通常の宣言を上回る。したがってblueが適用される。これが!importantの多用を避けるべき理由でもある。

71. 問71．次のうち、訪問済みのリンクを選択する疑似クラスはどれか。

    • ア．:link
    • イ．:active
    • ウ．:hover
    • エ．:visited

    正解：エ．:visited

    解説：:visitedが訪問済みのリンクを選択する。:linkは未訪問、:hoverはポインタが乗っている状態、:activeは押されている瞬間を表す。なお履歴の漏洩を防ぐため、:visitedに指定できるプロパティは色などに制限されている。

72. 問72．ul li a のセレクタが選択するのはどの要素か。

    • ア．すべてのa要素
    • イ．ul要素
    • ウ．li要素のみ
    • エ．ul内のliの子孫であるa要素

    正解：エ．ul内のliの子孫であるa要素

    解説：ul li a は半角スペース区切りの子孫結合子が2つ連なった形で、ul の中の li の中にある a 要素を選ぶ。階層の深さは問わないため、liの直下でなくても中にあれば対象になる。直接の子だけに限定したい場合は > を使う。

73. 問73．詳細度が同じ2つの規則がある場合の優先決定方法として正しいものはどれか。

    • ア．ランダムに決まる
    • イ．先に書いた規則が優先
    • ウ．両方無効になる
    • エ．後に書いた規則が優先

    正解：エ．後に書いた規則が優先

    解説：カスケードは!important→詳細度→ソース順の順に判定するため、詳細度が同じなら後に書かれた規則が勝つ。共通CSSの後に個別CSSを読み込ませて上書きするのは、この性質を利用した実務上の定石である。

74. 問74．button:hover の指定が適用されるのはどんな時か。

    • ア．クリックされた時
    • イ．フォーカスを得た時
    • ウ．読み込み完了時
    • エ．ポインタが上に乗っている時

    正解：エ．ポインタが上に乗っている時

    解説：:hoverはマウスポインタなどのポインティングデバイスが要素の上に乗っている間だけ適用される。クリックされている瞬間は:active、キーボード等でフォーカスを得た状態は:focusで、それぞれ別の疑似クラスになる。

75. 問75．section > p { } が選択するのはどの要素か。

    • ア．section内の全階層のp
    • イ．sectionの親のp
    • ウ．sectionの兄弟のp
    • エ．sectionの直接の子であるp

    正解：エ．sectionの直接の子であるp

    解説：子結合子（>）は直接の子だけを選ぶため、section > p は sectionの直下にあるp要素だけに当たり、section内のdivの中にあるpには当たらない。階層を問わず選びたい場合は半角スペースの子孫結合子を使う。