ここから本文です

CSSで特定の位置のみを効かせる ことってできますか?

yuy********さん

2019/9/1811:25:00

CSSで特定の位置のみを効かせる

ことってできますか?

例えば、トップページとサイドバーにエントリーカードを配置して、タイトルを大きくしたとします。

.entry-card-title {
font-size: 2em;}

これをサイドバーには聞かせたくないです。(メインにだけ効かせる感じ?)

そうするためにはどのようなコードを追加すればよいでしょうか?

初心者でぜんぜんわかりませんがよろしくお願いします。

閲覧数:
20
回答数:
1

違反報告

ベストアンサーに選ばれた回答

さん

2019/9/1811:42:05

解決策がいくつか挙がります。


topクラス属性を持つ要素内のentry-card-titleクラス属性を持つ要素にだけスタイルを適用するcssを書く方法

html
------------
<div class="top">
<div class="entry-card">
<div class="entry-card-title">
</div>
</div>
</div>
<div class="side">
<div class="entry-card">
<div class="entry-card-title">
</div>
</div>
</div>
-------------

css
-----------
.top .entry-card-title{
font-size: 2em;
}
----------


クラスの命名を分ける

html
------------
<div class="top">
<div class="top-entry-card">
<div class="top-entry-card-title">
</div>
</div>
</div>
<div class="side">
<div class="side-entry-card">
<div class="side-entry-card-title">
</div>
</div>
</div>
-------------

css
-----------
.top-entry-card-title{
font-size: 2em;
}
----------


クラスの命名を分ける&両方のentry-card-titleに同じスタイルを適用させたい

html
------------
<div class="top">
<div class="entry-card top-entry-card">
<div class="entry-card-title top-entry-card-title">
</div>
</div>
</div>
<div class="side">
<div class="entry-card side-entry-card">
<div class="entry-card-title side-entry-card-title">
</div>
</div>
</div>
-------------

css
-----------
.entry-card-title{
background-color: blue;
}

.top-entry-card-title{
font-size: 2em;
}
----------


命名規則にBEMを使う

html
------------
<div class="top">
<div class="entry-card entry-card--top">
<div class="entry-card__title entry-card__title--top">
</div>
</div>
</div>
<div class="side">
<div class="entry-card entry-card--side">
<div class="entry-card__title entry-card__title--side">
</div>
</div>
</div>
-------------

css
-----------
.entry-card__title{
background-color: blue;
}

.entry-card__title--top{
font-size: 2em;
}
----------

質問した人からのコメント

2019/9/20 09:57:22

詳しくありがとうございます!希望通りにできそうです!

あわせて知りたい

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる