半歩ずつでも前に進めば変わっていく

Kozue Blog

プログラミング 学習 記録

プログラミングで月収5万円になるまでの記録2日目

更新日:

なぜ土曜も出社しないといけないのか―by こずえ
こんばんは、こずえです。
プログラミング学習記録2日目です。
前回に引き続き「はじめてのCSS入門講座」を進めました。

合計学習時間

前回までの時間:0.75[h]
今回の時間:2.25[h]
合計時間:3.00[h]

学習内容

はじめてのCSS入門講座

メモ、つまづき、役立った情報

「2-4 特殊なセレクタ(CSSのセレクタ)」の隣接セレクタにつまづきました。

p {
    background-color: gray;
}

/*隣接セレクタ(④)*/
p + a {
    color: red;
}
隣接セレクタの表示結果

私はタグA→タグB…と順番が決まっているものと捉えたので④と⑤が赤くなると思いながら表示をしてみたのですが、赤くなったのは④だけでした。
問題だったのは下記の2.のように入れ子として次に現れるものは隣り合う要素ではないということでした。

  1. 正:「<タグA></タグA>」→「<タグB></タグB>」
  2. 誤:「<タグA><タグB></タグB></タグA> 」

改めて見直すと「隣り合う要素」とA→Bのような「順番」だと意味が違ってきますね。

理解のために書いたコード

HTML
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>CSSの練習</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>h1</h1>
		<a href="#">a…①</a>
		<a href="#">a…②</a>
		<p>
			<a href="#">a…③</a><br>
		</p>
		<a href="#">a…④</a>
		<a href="#">a…⑤</a>
</html>
CSS ※セレクタ毎にコメントアウトしながら確認しました。
p {
	background-color: gray;
}

/*子セレクタ(③)*/
/*p > a {
	color: red;
}*/

/*隣接セレクタ(④)*/
/*p + a {
	color: red;
}*/

/*間接セレクタ(④、⑤)*/
/*p ~ a {
	color: red;
}*/

/*間接セレクタ(②、④、⑤)*/
/*a ~ a {
	color: red;
}*/

-プログラミング, 学習, 記録
-, , ,

Copyright© Kozue Blog , 2019 All Rights Reserved Powered by STINGER.