超現場ブログ

Technique,Design and Events

CSSの基本「セレクタにおける優先順位」その1

Twitter Facebook Google+ はてブ

CSSの基本「セレクタにおける優先順位」その1

CSSの適用方法は様々あります。
まずは一般的な記述例として以下の記述をご覧下さい。

p {
    color: #000;
}
p {
    color: #CCC;
}

HTMLやCSSは基本的に、「上から読み込まれていきます」ので、後から書いている color: #CCC; が優先されます。

p.text {
    color: green;
}
.text {
    color: blue;
}

この場合は、「セレクタには個別性」により、先に書いている color: green; が優先されます。
この個別性の計算に従って優先度が決められた後に、一般的な認識として多い「後から書いた記述が優先される」ことになります。

個別性の計算は少し難しいかもしれませんので、この先はまた後ほど。

IDやクラスを用いたCSSは非常に便利な記述ができますが、少し意識した記述を心がけるようにすると、非常に管理しやすい記述になります。

ご質問・ご相談の方はこちら

ご質問・ご相談ですか?

どんなことでもお気軽にご相談ください。

ご質問・ご相談はこちら

Copyright © 超現場主義 All rights reserved.