便利なcssのセレクタ指定方法

今回は便利なcssのセレクタ指定方法を紹介します

#example>* {
 margin: 0 10px;
}

親に内包れる直下要素のみを対象に指定できます。
親要素であるexampleの直下の要素すべてにマージンが設定されます。

div[id^="sapmple"] { /* 属性 ^=" 文言"]で、【属性】が【文言】で始まる要素 */
 color: green;
}

p[class$="Txt"] { /*  属性$=" 文言"]で、【属性】が【文言】で終わる要素 */
 margin: 10px;
}

div[id*="Box"] { /* 属性*="文言 "]で、【属性】に【文言】を含む要素 */
 padding: 5px;
}

#sapmpleTxtBoxとセレクタ名を指定していたなら、上記の前方一致と後方一致、部分一致にあてはまります。