タグセレクタ
body{
font-size:1.5rem;
}
p{
color:#f00;
}
idセレクタ
#foo{
color:#f00;
}
classセレクタ
.red{
color:#f00;
}
子孫セレクタ
ul li a{
}
body a{
}
セレクタの点数制
body ul a{/*3点*/
color:#00f;/*実際は青*/
}
ul a{/*2点*/
color:#f00;/*赤があとでも適用されない*/
}
複数セレクタ
header,main,fotter{
width:80%;
}
main{/*これだとこっちが優先*/
width:60%;
}
body header,main,fotter{/*カンマで区切ったところで独立して数える*/
width:80%;
}
main{/*これだとこっちが優先*/
width:60%
}
隣接セレクタ
li+li{/*liの直後にあるliの意*/
color:#0f0;
}
<ul>
<li>aaa</li>/*ならない*/
<li>bbb</li>/*緑*/
<li>ccc</li>/*緑*/
</ul>
<header>
<nav></nav>
<p></p>/*ここだけ指定したい*/
<p></p>
</header>
<main>
<p></p>
</main>
header nav+p{/*3点*/
}
疑似クラス、疑似要素
a{
color:#333;
}
a:hover{
color:#300;/*暗めの赤*/
}
:nth-child()
<ul>
<li>a</li>/*ならない*/
<li>b</li>/*緑*/
<li>c</li>/*緑*/
</ul>
横に並んでると仮定して間にハイフンを入れたい
ul li{
border-left:1px #000 solid;
}
ul li:first-child{
border-left:none;
}
または
ul li{
border-right:1px #000 solid;
}
ul li:last-child{
border-right:none;
}
兄弟要素の中で4つおき
ul li:nth-child(4n) {
color: lime;
}
疑似要素
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
li::after{/*liのうしろに>を入れる*/
content:">";/*何を表示させたいかの部分*/
display:inline-block;
width:10px;
background-image:url("icon.png");
background-repeat:no-repeat;
}
li:last-child::after{
content:none;/*noneするとlastにつかない*/
}
rootにかける
:root{
font-size:10px;
}
body{
font-size:1.6rem;
}
