よく使うCSSセレクタ一覧

目次

セレクタとは？

---

cssを書くときに「どこに」「何を」「どうする」を書きますが
どこに　・・・セレクタ
何を　　・・・プロパティ
どうする・・・値

セレクタとは「どこに」効果を付けるのかの部分です。

良く使うセレクタ

• p { タグ名で指定 }　

• .className { classで指定 }　
  cssを書く時、前に「 . 」を付ける

• #idName { idで指定 }
  cssを書く時に前に「 # 」を付ける

• class, div, p { 複数要素に同じ指定 }
  「 , 」で区切る

　子孫要素

孫要素も対象になる

　直下の子要素

一つ下の階層の子要素だけ対象で孫は対象外

　兄弟要素

指定した要素より後の同じ階層の要素

　隣の要素

指定要素の次要素（２個以上離れているのは効果無し）

　兄弟要素の最初の要素

最初に出てくる要素ではないので注意

　兄弟要素の最後の要素

指定要素の最後ではなく、一番最後に指定要素がないと効果無し

　兄弟要素がない要素

１つでも兄弟要素あると効果無しに注意

　最初の子要素

最初にある指定要素（孫要素は別）

　最後の子要素

最後にある指定要素（孫要素とは別）

　兄弟要素で要素が１つの時

兄弟要素があっても指定要素が１つなら効果が有り

　〇〇番目の要素

孫要素がある時は孫要素の〇〇番目も指定される

　最後から〇〇番目の要素

孫要素がある時は孫要素の最後から〇〇番目も指定される

　奇数の子要素

孫要素がある時は孫要素の中で奇数の要素にも効果有り

　偶数の子要素

孫要素がある時は孫要素の中で偶数の要素にも効果有り

　倍数の子要素

孫要素がある時は各兄弟要素の中で倍数にも効果有り

　一文字目

孫要素にも効果有り

　全ての要素

全部の要素に効果あり

　要素の前後

content : " ";の中に入れたい物

その他

他にも、
・属性で指定
・属性内容の一部が一致
・属性内容の始めが一致
・属性内容の最後が一致
・テキストの１行目
・〇〇以外の要素
・要素が空の時
などの指定方法もありますが、僕はあまり使う機会が無かったので今回の良く使うセレクタには上げませんでした。

---

tree作成のjs

---

最後にCSSのセレクタとは関係ないんですが、今回使用した画像に出てきたHTMLとCSSを書いたらツリー構造でCSSの指定カ所を赤枠で囲むjsの書き方も残しておきます。

// DOMツリーを生成する関数
function generateTree(element, parent, styles, level = 0, isLastChild = true) {const treeItem = document.createElement("div");

// インデントを設定
let prefix = "";
if (level > 0) {
prefix += "　　".repeat(level - 1); // 前の階層のインデント
prefix += isLastChild ? "└─ " : "├─ ";
}

// 強調表示する部分（スタイルが適用された部分）を特定
let innerContent = element.tagName.toLowerCase();
let isHighlighted = false;
for (const rule of styles) {
if (element.matches(rule.selectorText)) {
innerContent = `<div class="highlight">${innerContent}</div>`; // 強調表示isHighlighted = true;
break;
}
}

// プレフィックスと内容をHTMLに追加
treeItem.innerHTML = prefix + innerContent;

// スタイルが適用されている要素を強調
parent.appendChild(treeItem);
const children = Array.from(element.children);
children.forEach((child, index) => {
generateTree(
child,
parent,
styles,
level + 1,
index === children.length - 1 // 最後の子要素かどうか
);
});
}

// CSSスタイルをパースする関数
function parseCSS(cssText) {
try {
const styleSheet = new CSSStyleSheet();
styleSheet.replaceSync(cssText);
return Array.from(styleSheet.rules);
} catch (error) {
console.error("CSSのパースに失敗しました:", error.message);
return [];
}
}

// メイン処理document.getElementById("generateTree").addEventListener("click", () => {
const htmlInput = document.getElementById("htmlInput").value.trim();
const cssInput = document.getElementById("cssInput").value.trim();
const treeContainer = document.getElementById("tree");

// ツリーコンテナをクリア
treeContainer.innerHTML = "";

// 入力HTMLを解析してツリー生成
try {
const parser = new DOMParser();
const doc = parser.parseFromString(htmlInput, "text/html");
const rootElement = doc.body.firstElementChild;

// 入力CSSを解析
const styles = parseCSS(cssInput);
if (rootElement) {
generateTree(rootElement, treeContainer, styles);
} else {
treeContainer.textContent = "正しいHTMLを入力してください。";
}
} catch (error) {
treeContainer.textContent = "エラー: " + error.message;
}
});