パンくずリストの間に-を入れたいとする
home - main - thispage
: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;
}
たとえば、画像を5*5で画面に並べたい
一枚の画像の右側にpadding
それだと5枚目の右にもはいって全体の配置が中心からずれる
→5つめのpadding-rightをけす
まあ左右に薄く半分ぶんの余白と下側に余白という手段もあります
5の倍数だけとかいう指定ができる
:nth-child(5n) {
color: lime;
}
疑似要素
::before
::after
/* リンクの後に矢印を追加 */
a::after {
content: "→";
}
>CSS において ::after は、選択した要素の最後の子要素として
擬似要素を作成します。
よく content プロパティを使用して、
要素に装飾的な内容を追加するために用いられます。
この要素は既定でインラインです。
疑似要素の場合はコロン2つ
パンくずリストを>でわけたい
<ul>
<li>aaa</li>
>
<li>bbb</li>
>
<li>ccc</li>
</ul>
これはリストの意味が通らない
<ul>
<li>aaa</li>
<li> > </li>
<li>bbb</li>
<li> > </li>
<li>ccc</li>
</ul>
これもリストの意味がおかしい
↓
正解
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
li::after{/*liのうしろに>を入れる*/
content:">";
}
この場合は、last-childで最後のは取ればいい
li:last-child::after{
content:none;/*noneするとlastにつかない*/
}
間に画像を挟むこともできる
<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につかない*/
}
要素の最初だけとかいうのもある
/* <p> の最初の行を選択 */
p::first-line {
color: red;
}
>CSS の ::first-line 疑似要素は、
ブロックレベル要素の最初の行にスタイルを適用します。
なお、最初の行の長さは要素の幅、文書の幅、
文字列のフォントの大きさなど、様々な要因に左右されます。
一文字目だけ色を変えたいとか
/* <p> の最初の文字を選択します */
p::first-letter {
font-size: 130%;
}
>CSS の ::first-letter 擬似要素は、ブロックレベル要素の
最初の行の最初の文字にスタイルを適用します。
ただし、最初の文字より前に他のコンテンツ (画像やインラインテーブルなど) が
ないときに限ります。
rootにかける
:root{
font-size:10px;
}
body{
font-size:1.6rem;
}
このrootはディレクトリ構造とかファイルのじゃなくて
１つのhtmlでの構造のおはなし
<html>
<body>
</body>
</html>
とか
<ul>
<li>
</li>
</ul>
こうやって書いたときの「親」
点数について
全称セレクタ
*{
}
ポイントは0点
