既存のPCサイトを外部CSSだけでスマホ対応させた案件で
CSSだけでどこまでマニアックな指定ができるか限界に挑んだので、覚書的に。
複数のidやclassで要素を絞り込む
複数のidやclassをずべて併せ持った要素だけにスタイルを適用させたい場合は、
スペースを開けずに続けて指定する書式で指定できます。
.typeA.typeB {
border-color: 3px solid #f00;
}
例えばトップページだけ1カラム構成にしたいとき
<div id="container" class="toppage"> <div id="mainColumn"> メインカラム </div> <div id="mainColumn"> サブカラム </div> </div>
#container {
width: 80em;
}
#container:after {
content: '';
display: bolck;
clear: both;
width: 0;
height: 0;
}
#mainColumn {
float: left;
width: 58em;
}
#subColumn {
float: right;
width: 20em;
}
#container.toppage #mainColumn {
float: none;
width: 80em;
}
#container.toppage #subColumn {
diplay: none;
}
複数の擬似クラス、擬似要素で条件を絞り込む
CSS3の:not()セレクタを重ねがけの延長になりますが
擬似系の条件を複数指定する場合も、スペースを開けずに続けて指定する書式で指定できます。
li {
background: #fff;
}
li:hover {
background: #ffc;
}
li:nth-child(even) {
background: #eee;
}
li:nth-child(even):hover {
background: #eec;
}
class、ID、擬似クラスをフル活用したら、静的な1点ものHTMLだったらほぼ思いどおりにできました！
CMS系の動的生成されるページは、擬似クラスが使用できる範囲が限られてしまうぶんだけ自由度がへるので、何箇所かテンプレートに手を入れざるをえない所がでてきました。無念。