# CSS selectors ###### tags: `css` `selectors` ## ```id``` selector > 一份 document 裡 *id* 不能重複(區分大小寫)。 ### CSS ``` #myId { olor: #000; } ``` ### HTML ``` <DIV> <DIV class="myId"><!-- 無 --></DIV> <DIV id="myId"><!-- 有 --></DIV> </DIV> ``` ## ```class``` selector ### CSS ```` .myClass { color: red; } ```` ### HTML ``` <DIV> <DIV class="myClass"><!-- 有 --></DIV> <DIV id="myClass"><!-- 無 --></DIV> </DIV> ``` ## ```.class1.class2``` selector > 同時有 *class1* 跟 *class2* 兩個 classes (不分順序) ### CSS ``` .myClass1.myClass2 { color: orange; } ``` ### HTML ``` <DIV> <DIV class="myClass1 myClass2"><!-- 有 --></DIV> <DIV class="myClass2 myClass3"><!-- 無 --></DIV> <DIV class="myClass3 myClass1"><!-- 無 --></DIV> <DIV class="myClass2 myClass1"><!-- 有 --></DIV> </DIV> ``` ## ```selector1 selector2``` selector > *selector2* 為 *selector1* 的 descendant (後裔：子或孫) ### 情境一 #### CSS ``` .myClass1 .myClass2 { color: palevioletred; } ``` #### HTML ``` <DIV class="myClass1"> <DIV class="myClass2"><!-- 有 --></DIV> </DIV> <DIV class="myClass2"> <DIV class="myClass1"><!-- 無 --></DIV> </DIV> ``` ### 情境二 #### CSS ``` .myClass2 .myClass1 { color: palevioletred; } ``` #### HTML ``` <DIV class="myClass1"> <DIV class="myClass2"><!-- 無 --></DIV> </DIV> <DIV class="myClass2"> <DIV class="myClass1"><!-- 有 --></DIV> </DIV> ``` ## ```*``` selector >所有 document 裡的 element ### CSS ``` * { font-size: 20px; line-height: 2.5; color: #333; } ``` ### HTML ``` <!-- HTML, BODY, H1都會套用 --> <HTML> <BODY> <H1>title</H1> </BODY> </HTML> ``` ## ```element``` selector > HTML Tags 的 element ### CSS ``` DIV { color: cornflowerblue; } ``` ### HTML ``` <DIV><!-- 有 --></DIV> ``` ## ```element.class``` selector > 帶有這個 *class* 的 element ### CSS ``` DIV.myClass { color: cornflowerblue; } ``` ### HTML ``` <DIV class="myClass"><-- 有 --></DIV> ``` ## ```selector1, selector2``` selector > *selector1* 跟 *selector2* 一起改變 ### CSS ``` H1, P { color: cornflowerblue; } ``` ### HTML ``` <H1><-- 有 --></H1> <DIV> <P><-- 有 --></P> <P><-- 有 --></P> </DIV> ``` ## ```selector1 + selector2``` selector > 緊接在 *selector1* 之後的 *selector2* 跟 *selector1* 是同階層 ### CSS ``` DIV + P { color: crimson; } ``` ### HTML ``` <DIV> <P><-- 無 --></P> </DIV> <P><-- 有 --></P> <P><-- 無 --></P> ``` ## ```selector1 ~ selector2``` selector > 以 *selector1* 開頭後的 *selector2* 跟 *selector1* 是同階層 ### CSS ``` P ~ UL LI P { color: crimson; } ``` ### HTML ``` <UL> <LI> <P><-- 無 --></P> </LI> </UL> <P>TEXT</P> <UL> <LI> <P><-- 有 --></P> </LI> </UL> <UL> <LI> <P><-- 有 --></P> <P><-- 有 --></P> </LI> </UL> ``` ## ```[attribute]``` selector > 帶有這個 *attribute* 的 element ### CSS ``` [target] { color: crimson; } ``` ### HTML ``` <DIV> <A href="#"><-- 無 --></A> <A href="#" target="_blank"><-- 有 --></A> <A href="#" target="top"><-- 有 --></A> </DIV> ``` ## ```[attribute="value"]``` selector > *attribute* 只帶有這個 *value* 的 element ### CSS ``` [target="_blank"] { color: crimson; } ``` ### HTML ``` <DIV> <A href="#"><-- 無 --></A> <A href="#" target="_blank"><-- 有 --></A> <A href="#" target="top"><-- 無 --></A> </DIV> ``` ## ```[attribute~="value"]``` selector > *attribute* 的屬性值有包含這個 *value* 的 element (不分順序) ### CSS ``` [class~=color] { color: deeppink; } ``` ### HTML ``` <DIV> <DIV class="color deeppink"><-- 有 --></DIV> <DIV class="deeppink color"><-- 有 --></DIV> <DIV class="colorDeeppink"><-- 無 --></DIV> </DIV> ``` ## ```[attribute|="value"]``` selector > *attribute* 的屬性值開頭可以是有這個 *value* 或是等於這個 *value* 的 element (在 element 裡，若除了 value 外，後面還有其他字串時，要用 "-" 字元分開) ### CSS ``` [class|=long] { color: darkgoldenrod; } ``` ### HTML ``` <DIV> <P class="long"><-- 有 --></P> <P class="longL"><-- 無 --></P> <P class="long-L"><-- 有 --></P> <P class="long_L"><-- 無 --></P> </DIV> ``` ## ```[attribute^="value"]``` selector > *attribute* 的屬性值開頭有包含 *value* 的 element ### CSS ``` [href^="https://www."] { color: firebrick; } ``` ### HTML ``` <DIV> <A href="https://www.google.com.tw"><-- 有 --></A> <A href="http://www.yahoo.com.tw"><-- 無 --></A> <A href="https://google.com.tw"><-- 無 --></A> </DIV> ``` ## ```[attribute$="value"]``` selector > *attribute* 的屬性值結尾有這個 *value* ### CSS ``` [class$="Value"] { color: firebrick; } ``` ### HTML ``` <DIV> <DIV class="endValue"><-- 有 --></DIV> <DIV class="endSubValue"><-- 有 --></DIV> <DIV class="ValueEnd"><-- 無 --></DIV> </DIV> ``` ## ```[attribute*="value"]``` selector > *attribute* 的屬性值中有這個 *value* 的 string 時 ### CSS ``` [class*="Value"] { color: firebrick; } ``` ### HTML ``` <DIV> <DIV class="starValueEnd"><-- 有 --></DIV> <DIV class="ValueEnd"><-- 有 --></DIV> <DIV class="starValue"><-- 有 --></DIV> <DIV class="Valstarue"><-- 無 --></DIV> </DIV> ``` ## ```:active``` selector > 當 element 被點擊時 ### CSS ``` a:active { color: red; } ``` ### HTML ``` <DIV> <A href="#"><-- 有 --></A> </DIV> ``` ## ```::after``` selector > 在 element 之後插入一些內容 ### CSS ``` P::after { content: "(插入的內容)"; } ``` ### HTML ``` <DIV> <P>P之後插入一些內容</P> </DIV> ``` ## ```::before``` selector > 在 element 之前插入一些內容 ### CSS ``` P::before { content: "(插入的內容)"; } ``` ### HTML ``` <DIV> <P>在P之前插入一些內容</P> </DIV> ``` ## ```:checked``` selector > element 被選取時(僅適用於 `INPUT type="checkbox"` 或 `INPUT type="radio"` 和 `<OPTION>` element ) ### CSS ``` INPUT:checked { width: 20px; height: 20px; } OPTION:checked { color: red; } ``` ### HTML ``` <DIV> <INPUT type="checkbox"><-- 有 --> <INPUT type="radio"><-- 有 --> <SELECT> <OPTION><-- 選擇時有 --></OPTION> <OPTION><-- 選擇時有 --></OPTION> </SELECT> </DIV> ``` ## ```:default``` selector > element 為默認時(僅適用於 `<BOTTON>` ， `INPUT type="checkbox"` 或 `INPUT type="radio"` 和 `<OPTION>` element ) ### CSS ``` INPUT:default { box-shadow: 0 0 1px 1px red; } OPTION:default { box-shadow: 0 0 1px 1px red; color: red; } ``` ### HTML ``` <DIV> <INPUT type="checkbox" checked>會套用到<BR /> <INPUT type="radio" checked>會套用到<BR /> <SELECT> <OPTION>不會套用</OPTION> <OPTION selected="selected">會套用到</OPTION> </SELECT> </DIV> ``` ## ```:disabled``` selector > 當有禁用的 element 時 ### CSS ``` INPUT:disabled{ color: #AAA; } ``` ### HTML ``` <DIV> <INPUT type="text" value="AAA">不會套用 <INPUT type="text" value="BBB">不會套用 <INPUT type="text" disabled="disabled" value="CCC">會套用到此處 </DIV> ``` ## ```:empty``` selector > 無 descendant (後裔：子或孫)的 element ### CSS ``` P:empty{ display: inline-block; width: 100px; height: 20px; background-color: red; } ``` ### HTML ``` <DIV> <P><!-- 有 --></P> <P>content<!-- 無 --></P> <P>content<!-- 無 --></P> </DIV> ``` ## ```:enabled``` selector > 啟用中的 `INPUT` element ### CSS ``` INPUT:enabled{ background-color: orange; } ``` ### HTML ``` <DIV> <INPUT type="text"><!-- 有 --> <INPUT type="text"><!-- 有 --> <INPUT type="text" disabled="disabled"><!-- 無 --> </DIV> ``` ## ```:first-child``` selector > 選取第一個 element ### CSS ``` P:first-child{ color: blue; } ``` ### HTML ``` <DIV> <P><!-- 有 --></P> <P><!-- 無 --></P> <P><!-- 無 --></P> </DIV> ``` ## ```:first-letter``` selector > element 的第一個字( element 必須為 block-level element ) ### CSS ``` P:first-letter{ color: blue; } ``` ### HTML ``` <DIV> <P>A<!-- 第一個字有 -->AA</P> <P>B<!-- 第一個字有 -->BB</P> <P>C<!-- 第一個字有 -->CC</P> </DIV> ``` ## ```:first-line``` selector > element 的第一行字( element 必須為 block-level element ) ### CSS ``` :first-line{ color: blue; } ``` ### HTML ``` <DIV> <P>AAA<!-- 這行有 --><BR>BBB</P> <P>AAA<!-- 這行有 --><BR>BBB<BR>CCC</P> <P>CCC<!-- 這行有 --></P> </DIV> ``` ## ```:first-of-type``` selector > 同一種 Tag element 的第一個 element ### CSS ``` P:first-of-type{ color: blue; } SPAN:first-of-type{ color: blue; } ``` ### HTML ``` <DIV> <P><!-- 有 --></P> <SPAN><!-- 有 --></SPAN> <P><!-- 無 --></P> <SPAN><!-- 無 --></SPAN> <P><!-- 無 --></P> </DIV> ``` ## ```:focus``` selector > 當焦點在 element 時 ### CSS ``` INPUT:focus{ background-color: blue; } ``` ### HTML ``` <DIV> First Name:<INPUT type="text"> Last Name:<INPUT type="text"> </DIV> ``` ## ```:hover``` selector > 滑鼠移過時 ### CSS ``` A:hover{ background-color: pink; } ``` ### HTML ``` <DIV> <A href="#">hover me</A> </DIV> ``` ## ```:in-range``` selector > 範圍值內有作用( attirbute 需具有 min 和/或 max 的 element ) ### CSS ``` INPUT:in-range { border: 2px solid yellow; } ``` ### HTML ``` <DIV> <input type="number" min="5" max="10" value="7"> <!-- (輸入5~10會套用樣式，小於5或大於10則不會套用樣式) --> </DIV> ``` ## ```:indeterminate``` selector > 只在 `<input type="checkbox">` ， `<input type=" radio">` 和 `<progress>` element上使用 ### CSS ``` INPUT:indeterminate { box-shadow: 0 0 1px 1px red; } ``` ### HTML ``` <DIV> <input type="checkbox" id="myCheckbox"> Checkbox </DIV> ``` ### JAVASCRIPT ``` var checkbox = document.getElementById("myCheckbox"); checkbox.indeterminate = true; ``` ## ```:valid``` selector > 輸入的值有效時才會作用( ex: `INPUT type="email"` 輸入正確格式時) ### CSS ``` INPUT:valid { border: 2px solid blue; } ``` ### HTML ``` <DIV> <INPUT type="email" value="email@gmail.com"> <INPUT type="number" min="3" max="5" value="4"> </DIV> ``` ## ```:invalid``` selector > 輸入的格式無效時才會作用 ### CSS ``` INPUT:invalid { border: 2px solid red; } ``` ### HTML ``` <DIV> <INPUT type="email" value="email@gmail.com"> <INPUT type="number" min="3" max="5" value="4"> </DIV> ``` ## ```:lang()``` selector > 語言 attribute ### CSS ``` P:lang(en) { color: pink; } P:lang(zh-TW) { color: purple; } ``` ### HTML ``` <DIV> <P lang="en"><!-- 套用粉色 --></P> <P lang="zh-TW"><!-- 套用紫色 --></P> </DIV> ``` ## ```:last-child``` selector > 作用於最後一個 element ### CSS ``` P:last-child{ color: blue; } ``` ### HTML ``` <DIV> <P><!-- 無 --></P> <P><!-- 無 --></P> <P><!-- 有 --></P> </DIV> ``` ## ```:last-of-type``` selector > 作用於同一種 Tag element 的最後一個 ### CSS ``` P:last-of-type{ color: blue; } SPAN:last-of-type{ color: green; } ``` ### HTML ``` <DIV> <P><!-- 無 --></P> <SPAN><!-- 無 --></SPAN> <P><!-- 無 --></P> <SPAN><!-- 套用綠色 --></SPAN> <P><!-- 套用藍色 --></P> </DIV> ``` ## ```:link``` selector > 尚未訪問過的 element ### CSS ``` A:link{ color: blue; } ``` ### HTML ``` <DIV> <A href="#"><!-- 訪問過則無 --></A> <A href="#"><!-- 未訪問過則有 --></A> </DIV> ``` ## ```:visited``` selector > 已訪問過的 element ### CSS ``` A:visited{ color: #eee; } ``` ### HTML ``` <DIV> <A href="#"><!-- 訪問過則有 --></A> <A href="#"><!-- 未訪問過則無 --></A> </DIV> ``` ## ```:not(selector)``` selector > 除了這個 selector 外的 element ### CSS ``` :not(A){ color: red; } ``` ### HTML ``` <DIV> <A href="#">AAA</A> <P>BBB</P> <SPAN>CCC</SPAN> </DIV> ``` ## ```:nth-child(n)``` selector > 從父層算下來的第 n 個子層的 element ### CSS ``` P:nth-child(2){ color: red; } ``` ### HTML ``` <DIV> <P><!-- 無 --></P> <P><!-- 有 --></P> <P><!-- 無 --></P> <P><!-- 無 --></P> <P><!-- 無 --></P> </DIV> ``` ## ```:nth-last-child(n)``` selector > 從父層算下來的倒數第 n 個子層的 element ### CSS ``` P:nth-last-child(3){ color: red; } ``` > HTML ``` <DIV> <P><!-- 有 --></P> <P><!-- 無 --></P> <P><!-- 無 --></P> </DIV> ``` ## ```:nth-last-of-type(n)``` selector > 同一種 Tag element 的倒數第 n 個的 element ### CSS ``` P:nth-last-of-type(3){ color: red; } SPAN:nth-last-of-type(1){ color: blue; } ``` ### HTML ``` <DIV> <P><!-- 有 --></P> <SPAN><!-- 無 --></SPAN> <SPAN><!-- 無 --></SPAN> <P><!-- 無 --></P> <SPAN><!-- 有 --></SPAN> <P><!-- 無 --></P> </DIV> ``` ## ```:nth-of-type(n)``` selector > 同一種 Tag element 的第 n 個的 element ### CSS ``` P:nth-of-type(2){ color: red; } ``` ### HTML ``` <DIV> <P><!-- 無 --></P> <SPAN><!-- 無 --></SPAN> <SPAN><!-- 無 --></SPAN> <P><!-- 有 --></P> <SPAN><!-- 無 --></SPAN> <P><!-- 無 --></P> </DIV> ``` ## ```:only-of-type``` selector > 子層中的同一種 element 只能有一個 ### CSS ``` DIV P:only-of-type{ color: red; } ``` ### HTML ``` <DIV> <P><!-- 無 --></P> <SPAN><!-- 無 --></SPAN> <SPAN><!-- 無 --></SPAN> <DIV> <P><!-- 有 --></P> </DIV> <SPAN><!-- 無 --></SPAN> <P><!-- 無 --></P> <DIV> <P><!-- 有 --></P> <SPAN></SPAN> </DIV> </DIV> ``` ## ```:only-child``` selector > 父層底下只有一個子 element ### CSS ``` P:only-child{ color: red; } ``` ### HTML ``` <DIV> <P><!-- 無 --></P> <SPAN><!-- 無 --></SPAN> <DIV> <P><!-- 有 --></P> </DIV> <DIV> <P><!-- 無 --></P> <SPAN><!-- 無 --></SPAN> </DIV> </DIV> ``` ## ```:required``` selector > 在不具有 required 屬性時作用 ### CSS ``` INPUT:required, TEXTAREA:required { background-color: yellow; } ``` ### HTML ``` <DIV> <INPUT type="text" required><!-- 有 --> <INPUT type="text"><!-- 無 --> <TEXTAREA rows="1" required><!-- 有 --></TEXTAREA> </DIV> ``` ## ```:out-of-range``` selector > 超出範圍內作用(需具有 min 和/或 max 屬性的 element ) ### CSS ``` INPUT:out-of-range { border: 2px solid red; } ``` ### HTML ``` <DIV> <!-- (輸入5~10不會套用樣式，小於5或大於10則會套用樣式) --> <INPUT type="number" min="5" max="10" value="12"> </DIV> ``` ## ```::placeholder``` selector > 有 placeholder 屬性時作用 ### CSS ``` INPUT::placeholder { background-color: red; color: yellow; } ``` ### HTML ``` <DIV> <INPUT type="text" placeholder="First name"><!-- 有 --> <INPUT type="text"><!-- 無 --> </DIV> ``` ## ```:read-only``` selector > 唯讀時作用 ### CSS ``` INPUT:read-only { background-color: #eee; color: yellow; } ``` ### HTML ``` <DIV> <INPUT type="text" readonly><!-- 有 --> <INPUT type="text"><!-- 無 --> </DIV> ``` ## ```:read-write``` > 能寫入時作用 ### CSS ``` INPUT:read-write { background-color: yellow; color: red; } ``` ### HTML ``` <DIV> <INPUT type="text" readonly><!-- 無 --> <INPUT type="text"><!-- 有 --> </DIV> ``` ## ```:required``` selector > 有 required 屬性時作用 ### CSS ``` INPUT:required { background-color: yellow; color: red; } ``` ### HTML ``` <DIV> <INPUT type="text" required><!-- 有 --> <INPUT type="text"><!-- 無 --> </DIV> ``` ## ```:root``` selector > 作用於根源素( HTML 中的根元素為 HTML element ) ### CSS ``` :root { background-color: orange; } ``` ### HTML ``` <HTML> <BODY> <H1></H1> </BODY> </HTML> ``` ## ```:target``` selector > 點擊的 A 連結為本文的 element 時，CSS 將會套用在被連結的 element 上 ### CSS ``` DIV :target { background-color: yellow; color: red; } ``` ### HTML ``` <DIV> <A href="#content1">content1</A> <P id="content1">content1 Text....</P> <A href="#content2">content2</A> <P id="content2">content2 Text....</P> </DIV> ``` ## 參考來源 * [W3Schools](https://www.w3schools.com/cssref/css_selectors.asp)