Selector คือ HTML elements หรือ elements ที่ CSS Rule ถูกนำไปใช้ ประกอบด้วยแบบต่างๆ ดังนี้
Class Selectors
การใช้ Selectors แบบ Class การประกาศเริ่มต้นด้วย . ตามด้วยชื่อ Class โดยชื่อ Class สามารถเป็นตัวอักษร ตัวเลข เครื่องหมาย -, _ เท่านั้น ห้ามมีช่องว่าง ตามตัวอย่าง
.share-1 {
position : absolute;
top : 0;
left : 0;
bottom : 15px;
}
CSS Rule ที่ประกาศ Selectors แบบ Class จะถูกนำไปใช้กับ elements ที่มี class ตรงกัน ตามด้านล่าง
<div class="share-1" >
<span>share.olanlab.com</span>
</div>
วิธีการใช้งาน - Class Selectors เหมาะกับการใช้เมื่อต้องการแสดงผลรูปแบบนั้นซ้ำหลายๆ ครั้งกับ elements หลายๆ อัน
ID Selectors
การใช้ Selectors แบบ ID การประกาศเริ่มต้นด้วย # ตามด้วยชื่อ ID โดยชื่อ ID สามารถเป็นตัวอักษร ตัวเลข เครื่องหมาย -, _ เท่านั้น ห้ามมีช่องว่าง ตามตัวอย่าง
#olanlab {
left : 0;
}
CSS Rule ที่ประกาศ Selectors แบบ ID จะถูกนำไปใช้กับ elements ที่มี id ตรงกัน ตามด้านล่าง
<div id="olanlab" >
<span>share.olanlab.com</span>
</div>
วิธีการใช้งาน - ID Selectors เหมาะกับการใช้เมื่อต้องการแสดงผลกับ element เพียงตัวเดียว เนื่องจาก ID เป็น unique สามารถมีได้ 1 จุดต่อ document ถ้ามีการประกาศซ้ำจะแสดงผลเพียงครั้งเดียว
The Universal Selector
การใช้ Universal Selector ประกาศด้วย * โดย Universal Selector จะบอกว่าให้ใช้ CSS Rule นี้กับทุก element ภายใน document
* {
border: 1px solid black;
}
Descendant Selectors
element ที่อยู่บน document ระดับที่อยู่ต่ำกว่าตัวมันเอง ถูกเรียกว่า "Descendant" ตามรูป
ตัวอย่าง
1. CSS Rule ถูกนำไปใช้กับ span ที่มี class เป็น inline-code ที่อยู่ภายใน div ที่มี id เป็น body
div#body span.inline-code {
font-family : Tahoma;
}
2. CSS Rule ถูกนำไปใช้กับ span ที่มี class เป็น inline-code ที่อยู่ภายใน p และ p อยู่ภายใน div ที่มี id เป็น body
div#body p span.inline-code {
font-family : Tahoma;
}
3. CSS Rule ถูกนำไปใช้ทุก elements ที่อยู่ภายใน div ที่มี id เป็น body
div#body * {
border : 1px solid orange;
}
Direct Child Selectors
element ที่อยู่บน document ที่มีระดับต่ำกว่า 1 ระดับ ถูกเรียกว่า "Child" ตามรูป
ตัวอย่าง
1. CSS Rule ถูกนำไปใช้กับ span ที่มี class เป็น inline-code ที่เป็น child ของ p
p > span.inline-code {
font-family : Tahoma;
}
2. CSS Rule ถูกนำไปใช้กับ span ที่มี class เป็น inline-code ที่เป็น child ของ p โดย p เป็น child ของ div ที่มี ID เป็น body
div#body > p > span.inline-code {
font-family : Tahoma;
}
3. CSS Rule ถูกนำไปใช้กับ span ที่มี class เป็น inline-code ที่อยู่ภายใน p โดย p เป็น child ของ div ที่มี ID เป็น body
div#body > p span.inline-code {
font-family : Tahoma;
}
Next Sibling Selector
elements ที่อยู่บน document ที่อยู่ระดับเดียวกัน ถัดจากกัน 1 element ตามรูป
ตัวอย่าง
1. CSS Rule ถูกนำไปใช้กับ div ที่มี ID เป็น body ที่อยู่ถัดจาก div ที่มี ID เป็น heading
div#heading + div#body {
border : 1px solid rgb(200, 200, 200);
}
Attribute Selectors
ตัวอย่าง
1. CSS Rule ถูกนำไปใช้กับ img ที่มี attribute เป็น alt
img[alt] {
border : 1px solid blue;
}
2. CSS Rule ถูกนำไปใช้กับ input ที่มี type เป็น text
input[type="text"] {
background : blue;
color : white;
border : 1px solid royalblue;
}
3. CSS Rule ถูกนำไปใช้กับ input ที่มี type เป็น text และมี name เป็น first_name
input[type="text"][name="first_name"] {
background : blue;
color : white;
border : 3px solid royalblue;
}
4. CSS Rule ถูกนำไปใช้กับ a ที่มี href เริ่มต้นด้วย ftp://
a[href^="ftp://"] {
background : blue;
color : white;
border : 3px solid royalblue;
}
5. CSS Rule ถูกนำไปใช้กับ a ที่มี href เริ่มต้นด้วย mailto:
a[href^="mailto:"] {
padding-left : 25px;
color : blue;
text-decoration : none;
}
6. CSS Rule ถูกนำไปใช้กับ a ที่มี href ตามท้ายด้วย .html
a[href$=".html"] {
padding-left : 25px;
color : red;
text-decoration : none;
}
7. CSS Rule ถูกนำไปใช้กับ a ที่มี href เป็น .php อยู่ภายใน
a[href*=".php"] {
padding-left : 25px;
color : yellow;
text-decoration : none;
}
Pseudo-Elements :first-letter and :first-line
1. CSS Rule ถูกนำไปใช้กับตัวอักษรตัวแรกของ p
p:first-letter {
background : blue;
color : pink;
font : 55px "Tahoma";
}
2. CSS Rule ถูกนำไปใช้กับบรรทัดแรกของ p ที่มี class เป็น quote
p.quote:first-line {
font-weight : bold;
letter-spacing : 3px;
}
Pseudo-Classes
CSS Rule ไปใช้งานกับ a แบบต่างๆ
a:link {
color : mediumblue;
}
a:visited {
color : magenta
}
a:hover {
text-decoration : underline;
}
a:active {
color : crimson;
}