要素セレクタ、クラスセレクタ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSSの練習</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- <h1>見出し</h1> -->
<h1 class="info title">見出し</h1>
<p class="info">こんにちは。こんにちは。こんにちは。こんにちは。</p>
<h2>見出し</h2>
<p>こんにちは。こんにちは。こんにちは。こんにちは。</p>
</body>
</html>/* h1 { */
.info {
color: skyblue;
}
.title {
font-weight: normal;
}idセレクタ、全称セレクタ
#title {
color: pink;
}
* {
font-size: 12px;
}属性セレクタ
<body>
<ul>
<li><a href="https://dotinstall.com" target="_blank">dotinstall</a></li>
<li><a href="https://twitter.com/dotinstall" target="_blank">Twitter</a></li>
<li><a href="https://facebook.com/dotinstall">Facebook</a></li>
<li><a href="#top">TOP</a></li>
</ul>
</body>[target] {
color: red;
}
[href="#top"] {
font-size: 24px;
}
[href^="https"] {
background-color: aqua;
}
[href$="dotinstall"] {
color: yellow;
}
[href*="com"] {
font-weight: bold;
font-size: 12px;
}セレクタ 組み合わせ
p + p は先頭のpには適用されないことを利用してよく使われる
.info, p
h1.info
main > h1
main h1
p + p pの 直後のpから適用
li + li {
background-color: red;
}疑似要素 before, after
カスタムデータ属性併用
- js, phpでここにデータを埋め込んで使ったりする
<body>
<h1 data-subtitle=" - Main Title">見出し</h1>
<p>こんにちは。こんにちは。こんにちは。こんにちは。</p>
<h2 data-subtitle=" - Sub Title">見出し</h2>
<p>こんにちは。こんにちは。こんにちは。こんにちは。</p>
</body>h1::before,
h2::before {
content: '---';
}
h1::after,
h2::after {
content: attr(data-subtitle);
}擬似クラス
hover擬似クラス
<body>
<h1>見出し</h1>
<p>こんにちは。こんにちは。こんにちは。こんにちは。</p>
<h2>見出し</h2>
<p>こんにちは。こんにちは。こんにちは。こんにちは。</p>
<div class="btn">OK</div>
</body>.btn {
width: 100px;
background: skyblue;
text-align: center;
padding: 4px;
color: white;
cursor: pointer;
}
.btn:hover {
opacity: 0.8;
}nth-child 疑似クラス
<body>
<main>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
</main>
</body>main > :nth-child(2) {
color: red;
}
main > :nth-child(3n) {
color: blue;
}
main > :nth-child(odd) {
background-color: pink;
}
main > :nth-child(even) {
background-color: skyblue;
}
main > :first-child {
font-size: 24px;
}
main > :last-child {
color: white;
}nth-of-types 擬似クラス
同じ要素の中で種類を考慮しながら順番を指定できる
<body>
<main>
<h1>見出し</h1>
<p>こんにちは。</p>
<p>こんにちは。</p>
<h2>見出し</h2>
<p>こんにちは。</p>
<p>こんにちは。</p>
<h2>見出し</h2>
<p>こんにちは。</p>
<h2>見出し</h2>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<h2>見出し</h2>
<p>こんにちは。</p>
</main>
</body>main > h2:nth-of-type(3) {
color: pink;
}
main > h2:nth-of-type(even) {
background: rgb(192, 255, 212);
}
main > h2:first-of-type {
color: yellow;
}
main > h2:last-of-type {
color: skyblue;
}empty, not 擬似クラス
注意点として、半角スペースや改行などもempty判定はされないことに注意
<body>
<ul>
<li>項目</li>
<li></li>
<li> </li>
<li>
</li>
<li><!-- コメント --></li>
<li>項目</li>
</ul>
</body>li:empty {
color: red;
}
li:not(:empty) {
background: skyblue;
}詳細度
id
class
疑似要素
id * n > class * n > 疑似要素 * n
importantはそれよりも優先される<style> タグはさらに優先される
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSSの練習</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<section id="about">
<h1 id="main" class="title box" style="color: skyblue;">Main Title</h1>
</section>
</body>
</html>#about > #main { color: gray; }
h1 { color: red !important; }
h1#main.box { color: yellow !important; }
section > #main.title { color: blue; }
section#about > h1 { color: pink; }toto
back