18. Simple selectors — Learn web development | MDN

【所要時間】

約46分(2018年7月18日)

【概要】

基本的なCSSセレクタの使い方を学ぶ。

【要約・学んだこと】

Type selectors aka element selectors

このセレクターは、セレクタ名と、HTML element名で大文字小文字を区別しない。

/* All p, ui, li elements are red */
p, ui, li {
  color: red;
}

コンマで複数のelementを選択できる。

Class selectors

<li class="first done">Create an HTML document</li>
<li class="second done">Create a CSS style sheet</li>

HTMLで”first” “second” “done”というクラスを作る。

/* The element with the class "first" is bolded */
.first {
  font-weight: bold;
}
/* All the elements with the class "done" are strike through */
.done {
  text-decoration: line-through;
}

“ .+class ”でCSSを適用するクラスを指定できる。

ID selectors

<p id="rude"> — "Go away!"</p>

HTMLでrudeというidをつけると、rude idのみ下記のCSSが適用される。

#rude {
  font-family: monospace;
  text-transform: uppercase;
}

”#+id”でCSSを適用するidを指定できる。

・Universal selector

* {
  padding: 5px;
  border: 1px solid black;
  background: rgba(255,0,0,0.25)
}

“*”でページ内の全ての要素に適用できる。

【わからなかったこと】

なし。

【感想】

・いつもはすぐに見つかるMediumの記事を修正するボタンがなかなか見つからなかった。ブラウザの幅を短くすると、右上にあるはずのeditが見えなくなるということを学んだ。