2025年2月27日 / 最終更新日時 : 2025年4月14日はま爺 CSS覚書

設定：セレクター

セレクター

属性内容が一致する要素

class-hoge 内容が一致：*
class-hoge 始まりが一致：^
class-hoge 最後が一致：$

文字のパターンで判別
a[href*=”.pdf”]
a[href*=”.xlsx”]

[class*="hoge"] {
color: red;
}

a[href*=".pdf"] {
    .....
}
a[href*=".xlsx"]::after {
    background-image: url(icon_excel.webp);
}

擬似クラス関数 :where():is()

:is()は条件に一致した要素を選択することができる
nav、mainの中にある h1=red
:where()は:is()と同じ。違いは詳細度が常に0になる
:where() < :is()
:not()はじゃない要素

:is(nav, main) h1 {
color: red;
}

a:not(:hover, .current) {
color: red;
}
a:not(:last-child) {
color: red;
}

擬似クラス関数 :has()

フォームがフォーカスされると背景色、影を付加

:has([target="_blank"]) { color: red; }

.sam26 form:has(input:focus) {
  box-shadow: 0px 0px 10px #999 !important;
  background:#afa;
}

:hasを使ったメニューサンプル

ul.sam01 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  font-size: 1.15rem;
  margin-inline: auto;
  gap: 1rem 2rem;
  padding: 0;
  background: #333;
}

.sam01 li {
  list-style: none;
  background: #fff;
  color: black;
  transition: all 0.3s;
  cursor: pointer;
  padding: 0.5rem 2rem;
  position: relative;
  z-index: 2;
}

.sam01 li::after {
  content: "";
  display: inline-block;
  position: absolute;
  inset: -0.5rem;
  z-index: -1;
}

.sam01 li:hover {
  scale: 1.2;
  opacity: 1 !important;
  background: #0066ff;
  color: rgb(255, 255, 255);
  will-change: top, left, opacity, margin, padding, width, height, transform;
}

ul.sam01:has(li:hover) li {
  opacity: 0.5;
}

Lorem
Eaque
Quasi
Eligen
Delect
Illum
Ratio

擬似クラス:nth-child

基本は n数の「n」に +、-、X、
nth-childは親要素から見て兄弟要素の何番目か指定
.hoge:nth-child(3)
<div class=”hoge”>
<p>
<p>
<img ←ここが適用>
<p>

nth-of-typeは指定した要素のみを指定
.hoge p:nth-of-type(3)
<div class=”hoge”>
<p>
<p>
<img>
<p ←ここが適用>

ofを使うとより自由度が上がった
セレクターをカンマ区切りにすることで複数指定

兄弟要素がない要素
:only-of-type


6番目以降
:nth-child(n+6) {
}
5個以上は全て
li:nth-last-child(n+5),
li:nth-last-child(n+5) ~ li {
}
3番目～5番目まで
p:nth-child(n+3):nth-child(-n+5) {
}
1番目と4の倍数
p:nth-child(4n+1) {
}

最後から3番目
p:nth-last-child(-n+3){
}

:nth-child(1 of p) {
    color: red;
}
<div>
    <span>a<span>
    <p ←ここが適用>b</p>
    <p>c</p>
<div>

:nth-child(2n of .text, .text2 + .text2) {
}


div:nth-child(odd):not(:first-child) {
}

擬似クラス:attr()

:before、:after 疑似要素使用される content プロパティ。

02.28のニュース01
02.27のニュース02
02.26のニュース03

<ul class="sam03">
<li post-date="2025.02.28">2025.02.28のニュースの投稿日時を表示01</li>
<li post-date="2025.02.27">2025.02.27のニュースの投稿日時を表示02</li>
<li post-date="2025.02.26">2025.02.26のニュースの投稿日時を表示03</li>
</ul>

リンクを追加する

リンクを追加

<a href="https://www.google.co.jp/" class="sam04">リンクを追加</a>

.sam03 {
  display: grid;
  gap: 0.5em;

  & li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5em;
  }

  & li:before {
    content: attr(post-date);
    margin-right: 1em;
  }
}

a.sam04:after {
  content: " URL : " attr(href);
  font-size: 0.86em;
  display: block;
  color: hotpink;
}

擬似クラス:attr()で共通注釈

※、・、* などemが揃わない時の注釈設定

「※」で作る注釈
「・」で作る注釈
「*」で作る注釈

<ul class="sam05">
<li post-date="※">※で作る注釈</li>
<li post-date="・">・で作る注釈</li>
<li post-date="*">*で作る注釈</li>
</ul>

.sam05 {
  display: grid;
  gap: 0.5em;
	
  & li {
    display: grid;
    grid-template-columns: 1em 1fr;
    gap: 0.5em;
  }

  & li:before {
    content: attr(post-date);
    width: 1em;
    display: grid;
    justify-content: center;
    align-items: start;
  }
}

擬似クラス:targetで表示

WordPressでは効かない
理由 : #以降のURLが表示されないから

表示 / 非表示

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。またそのなかでいっしょになったたくさんのひとたち、

<a href="#sam06">表示</a> / <a href="#sam06_none">非表示</a>
<p id="sam06">あのイーハトーヴォのすきとおった風、</p>

#sam06 {
  display: none;
}

#sam06:target {
  display: block;
  background-color: pink;
}

擬似クラス::marker

list-styleを指定したときに表示される要素のスタイルを変更

リスト
リスト
リスト
リスト

<ul class="sam07">
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>

.sam07 li {
  list-style: decimal-leading-zero;
  margin-left: 3rem;
  
  &::marker {
    color: #cf0505;
  }
}

counter(item)

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。
親譲りの無鉄砲で
親譲りの無鉄砲で小供の時から損ばかりしている。

<ul class="sam08">
<li>親譲りの無鉄砲で小供の時から損ばかりしている。</li>
<li>親譲りの無鉄砲で</li>
<li>親譲りの無鉄砲で小供の時から損ばかりしている。</li>
</ul>

.sam08 li {
  margin-left: 3em;
  text-indent: -3em;
  counter-increment: item;
  
  &. li::before {
    content: "（" counter(item) "）";
  }
}

擬似クラス::selection

選択した文書の一部のスタイルを適用
background、colorなど

選択すると背景と色が変わる

<p class="sam09">選択すると背景と色が変わる</p>

.sam09::selection {
    background-color: #333;
    color: #fff;
    font-size: 1.1em;
}

カテゴリー: CSS覚書

タグ: css