/*タグセレクタ*/
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;
}
