学科 HTML/CSS基礎⑦cssメモ

li:first-child{
  color: orange;
}

リストの最初のカラー指定

li:last-child{
  color: orange;
}

リストの最後

li:nth-child(1){
  color: orange;
}

li:nth-child(2){
  background: orange;
}

li:nth-child(3){
  background: lightblue; 
}

リスト指定

li:nth-child(2n){
  color: orange;
}

２の倍数

li:not(:first-child){
  color: orange;
}

最初のリスト

a{
  font-size: 24px;
  color: black;
  text-decoration: none;
}

/* ホバーした時のスタイル */
a:hover{
  color: orange;
  text-decoration: underline;
}

ボタンのカラー

.item {
  display: flex;
  align-items: center;
  gap: 24px;
}

.item:nth-child(2n) {
  flex-direction: row-reverse;

.itemは普通に横並び
.item:nth-child(2n) {
flex-direction: row-reverse;　は二番目は逆順

p.example::first-letter {
color: #ff0000;
}　　
最初の文字を変える

最近の投稿