属性セレクター CSS

何番目系

:nth-child()（兄弟、別タグもカウントされる　※class指定は不可）

３番目

p:nth-child(3)

３の倍数目

p:nth-child(3n)

４つ目からスタートして３の倍数目

p:nth-child(3n+4)

最初の2こ

p:nth-child(-n+2)

2番目以降すべて

p:nth-child(n+2)

最後から2番目のp

p:nth-last-child(2)

:nth-of-type()（兄弟、同タグのみカウント　※class指定は不可）

pだけカウントして3番目のp

p:nth-of-type(3)

要素内最後のp。

p:last-of-type

親子兄弟隣接

~ （以降の兄弟）

h1以降の兄弟p

h1~p

li.activeより前の兄弟li全て（特定の要素前全て、自分含む）

li:not(li.active~li)

li.activeより前の兄弟li全て（特定の要素前全て、自分含まない）

li:not(li.active~li):not(li.active)

:has()（子、下の兄弟の要素を判定）

imgを子にもつa（imgを囲ってるa）

a:has(img)

a.activeを直後にもつa（a.active要素の直前のa）

.pager a:has(+ .active)

まとめる系

:is()

以下は同じ

header a,footer a

:is(header,footer) a

:where()

以下は同じ

header a,footer a

:where(header,footer) a

header,footerの部分は優先度の効力はないため優先度的には以下と同じ

a

RegEx系

title属性があるもの

a[title]{
   color:red;
}

hrefリンク先URLにurbanを含むもの

a[href*="urban"]{
   color:red;
}

hrefが.comで終わるもの

a[href$=".com"]{
   color:red;
}

hrefがhttpで始まるもの

a[href^="http"]{
   color:red;
}

urbanというclassがあるもの（複数クラスを指定している場合で語の完全一致させたいときに使う）class="urban dic"

a[class~="urban"]{
   color:red;
}

リンク先URLが特定のaタグにだけcssを追加する方法

「urban」を含むリンク先のものだけにclass modal を追加する

$(document).ready(function() {
   $('a[href*="urban"]').addClass('modal');
});