吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

子孫以外のセレクタ指定方法

2014年2月26日 / category : reference-sass, sass

Sassで、子孫以外のセレクタの指定の方法を紹介します。

Sass
#main{
	*{
		text-decoration:underline;
	}
	> a{
		font-size:12px;
	}
	h2{
		+ p{
			color: #f00;
		}
	}
	h3{
		 ~ p{
			 color: #0f0;
		 }
	}
	li{
		font-size: 12px;
		&:first-child{
			font-size: 18px;
		}
	}
	input{
		&[type=text]{
			border:1px solid #f00;
		}
	}
}
CSS – コンパイル後
#main * {
  text-decoration: underline;
}
#main > a {
  font-size: 12px;
}
#main h2 + p {
  color: #f00;
}
#main h3 ~ p {
  color: #0f0;
}
#main li {
  font-size: 12px;
}
#main li:first-child {
  font-size: 18px;
}
#main input[type=text] {
  border: 1px solid #f00;
}