同じブロック内の同じ要素で文字サイズを変えたい時

Question

同じブロック内で文字のサイズを変えたい時、どうしたらいいのでしょうか？

下記でいうと、アイウエオを16pxに、かきくけこを12pxにしたいのですが、やってみたら両方とも16pxになってしまいます。
cssは下に書いた方が優先されるからこれでいいと思ってたんですが・・

複数箇所こうしたい場所があるので、一箇所しか使えないid属性以外の方法で何かないですか？
お願いします。

<div class="wrap">
 <p>アイウエオ</p>
 <p class="small">かきくけこ</p>
</div>

.wrap p {
 font-size: 16px;
}
.small {
 font-size: 12px;
}

Answer 1

セレクタがより詳しく優先度が高い要素で入力されている方が優先されます。

http://creator.aainc.co.jp/archives/4947

|指定方法|例|点数|

|:--|:--|--:|
|全称セレクタ|*|0|
|タイプセレクタ|p|1|
|擬似要素|:first-child|1|
|擬似クラス|[type="text"]|10|
|classセレクタ|.fugafuga|10|
|idセレクタ|#piyopiyo|100|
|要素に直書き|style=""|1000|

または!important宣言を付けることで最優先で適応されます。

Answer 2

下記のようにしてはいかがでしょうか

.wrap p {
 font-size: 16px;
}
p.small {
 font-size: 12px;
}

Comments

[gomes_2222]

できました！
ありがとうございます。

Answer 3

wrapのpに対して指定してます。
smallより優先されるので、p.smallと記述しないと駄目なはずです。