連番に共通CSS
=(イコール)の前に*(アスタリスク)をつけると、その指定した値を含む要素、という設定になります。
- txt-01
- txt-02
- txt-03
<style>
.sample_01 li[class*="txt"] {
color: #D93600;
}
</style>
<ul class="sample_01">
<li class="txt_01 target">txt-01</li>
<li class="txt_02">txt-02</li>
<li class="target">txt-03</li>
</ul>
notの使い方
/* まずは各アイテムの右にボーダーを... */
.nav li {
border-right: 1px solid #666;
}
/* ...続いて、最後だけ削除... */
.nav li:last-child {
border-right: 0;
}
/* ...最後のアイテム以外全てにボーダーを適用 */
.nav li:not(:last-child) {
border-right: 1px solid #666;
}
h1要素ではない要素に適用されます。
:not(h1) { color: red; }
p要素でsampleというクラスが付いていないものに適用されます。
p:not(.sample) { color: red; }
<script>
$("a[href^=#]").not("a[href^=#syouyu],a[href^=#sio]").click(function() {
//下記2つは同じ事
$('#ex1 ul li:not(:first)').css({'opacity':'0.2'});
$('#ex4 ul li').not(':first').css({'opacity':'0.2'});
</script>
hasの使い方
.hasは逆に特定の子要素を持つ親要素を取得します。
<ul>
<li><span>texttext</span></li>
<li><span>texttext</span></li>
<li>texttext</li>
<li><span>texttext</span></li>
</ul>
$('.c li').has('span').css('color', 'red');
.hasメソッドを応用して特定の要素以外の要素を取得したいと思います。
<ul>
<li><span>texttext</span></li>
<li><span>texttext</span></li>
<li>texttext</li>
<li><span>texttext</span></li>
</ul>
$('.d li:not(:has("span"))').css('color', 'red');
E[foo^="bar"]
a[href^="http"] {
background:url(img/sample.png) no-repeat right center;
}
<a href="http://example.com">このリンクには適用されます</a>
<a href="example.html">このリンクには適用されません</a>
この場合、href属性の値がhttpで始まっているa要素に適用されます。つまり絶対パスで始まるリンクに適用されます。
E[foo$="bar"]
a[href$="pdf"] {
background:url(img/sample.png) no-repeat right center;
}
この場合、href属性の値がpdfで終わっているa要素に適用されます。つまりpdfファイルへのリンクに適用されます。
E[foo*="bar"]
a[href*="example"] {
background:url(img/sample.png) no-repeat right center;
}
この場合、href属性に「example」という文字が含まれていれば適用されます。