CSS3 Selector

2015/12/02 阮韞澂

Attribute Selector

[ ]
用於判斷標籤的屬性
與Class選擇器同級

Has Attribute

擁有某個屬性


[HTMLAttribute]{
	(Attribute)
}


[placeholder]{
    background:lightblue;
}

Demo

Attribute Value Is

屬性為指定值


[HTMLAttribute="Value"]{
	(Attribute)
}


[type="number"]{
    background:lightblue;
}

Demo

Attribute Value Substring

屬性值之子字串


[HTMLAttribute*="Value"]{
	(Attribute)
}


[value*="abc"]{
    background:lightblue;
}

Demo

Attribute Value Has

屬性之值包含(空白分隔)


[HTMLAttribute~="Value"]{
	(Attribute)
}


[value~="abc"]{
    background:lightblue;
}

Demo

Attribute Value Begin With

屬性之值開頭


[HTMLAttribute^="Value"]{
	(Attribute)
}


[value^="als"]{
    background:lightblue;
}

Demo

Attribute Value End With

屬性之值結尾


[HTMLAttribute$="Value"]{
	(Attribute)
}


[value$="le"]{
    background:lightblue;
}

Demo

Attribute Value Start With

屬性之值開始('-'分隔)

abc-def


[HTMLAttribute|="Value"]{
	(Attribute)
}


[value|="star"]{
    background:lightblue;
}

Demo

Try It!

將所有開新分頁的超連結設定為紅色

Demo

Pseudo-Classes

:pseudo-classes
與Class選擇器同級
無參數 :pseudo-classes
有參數 :pseudo-classes(value)

Root Selector

:root
選取根元素
HTML中為<html>元素


:root{
	background: yellow;
}

Demo

Not Selector

:not(Selector)
選擇所有不符合選擇器之元素
不列入優先權計算


body :not(h2){
    display:block;
    margin:5px;
    border:1px solid red;
}

Demo

Empty Selector

選擇沒有子代的元素
包含文字在內
直接作用於單標籤元素
IE9以下不支援


div:empty{
    background:lightblue;
}

Demo

lang Selector

用於判斷元素的lang屬性


:lang(eng){
	(Attribute)
}


[lang="eng"]{
	(Attribute)
}

Pseudo-Classes:Link

:link
:visited
:focus
:hover
:active

:link

尚未造訪的連結


a:link{
    color:blue;
}

:visited

造訪過的連結


a:visited{
    color:darkgreen;
}

:focus

tab選擇的目標

點擊時也會觸發

可用於其他元素


a:focus{
    background:yellow;
}

:hover

滑鼠停留的目標

觸控點擊也會持續觸發

可用於其他元素


a:hover{
    text-decoration:underline;
}

:active

點擊時的目標

可用於觸控

可用於其他元素


a:active{
    font-size:2em;
}

Pseudo-Classes:Link

Demo

Try It!

美化頁面中的超連結

Demo

Pseudo-Classes:Sequence

:first-child
:first-of-type
:last-child
:last-of-type
:only-child
:only-of-type
:nth-child()
:nth-of-type()
:nth-last-child()
:nth-last-of-type()

Pseudo-Classes:Sequence

-child為同層所有元素

-of-type為同層同一種元素

:first-

:first-child & :first-of-type

選取同層中第一個元素/同層中同一種元素中的第一個

:first-of-type在IE9以下不支援


div:first-child{
    background:lightblue;
}
p:first-of-type{
    background:yellow;
}

Demo

:last-

:last-child & :last-of-type

選取同層中最後一個元素/同層中同一種元素的最後一個

IE9以下不支援


div:last-child{
    border:1px solid red;
}
p:last-of-type{
    background:yellow;
}

Demo

:only-

:only-child & :only-of-type

選取同層中只有一個元素/同層中該元素只有一個

IE9以下不支援


div:only-child{
    background:lightblue;
}
p:only-of-type{
    background:yellow;
}

Demo

:nth- & :nth-last-

依照指定順序選取

:nth-last- 由後往前

:nth-child()
:nth-of-type()
:nth-last-child()
:nth-last-of-type()

選取時第一項為1

:nth- 參數

odd/even
an+b

:nth- odd/even

選取奇數項或偶數項


div:nth-child(odd){
    border:1px solid red;
}
p:nth-last-of-type(even){
    border:1px solid green;
}

Demo

:nth- an+b

a為間距，預設1

b為起始點，預設0

起始點也會選取


div:nth-child(3n+1){
    border:1px solid red;
}

Demo Demo

:nth- an+b

a與b可為負數

a負數代表反向

b為0或負數代表不存在的虛擬元素，不作用但列入計算


:nth-child(-2n+3){
    border:1px solid red;
}
:nth-child(5n-3){
    border:1px solid red;
}

Demo Demo

Try It!

以順序選擇器美化表格

Demo