สอน CSS ตอนที่ 2 การใช้งาน Selectors ของ CSS

สอน CSS ตอนที่ 2 การใช้งาน Selectors ของ CSS

เรียนรู้การใช้งาน Selectors ของ CSS แบบเจาะลึกจากง่ายไปหายาก ตอนที่ 2

Jul 01, 2016

แก้ไขล่าสุด มีผู้อ่าน 11,087  |  WEB CSS

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;
}

 


แบ่งปัน

ชอบ +1

บันทึก

ฝากคำถาม คำแนะนำ ได้ที่

Facebook : Share.OlanLab.Com
LINE ID : @olanlab
อีเมล์ : olan@olanlab.com

หลักสูตร

สอนพื้นฐาน CSS สำหรับผู้เริ่มต้น

เรียนรู้การใช้ css ในการออกแบบหน้า Web ให้แสดงผลตามที่ต้องการ ตั้งแต่เริ่มต้นจนถึงขั้นสูงด้วยตัวเอง
Share คลังความรู้ด้านเทคโนโลยี สารสนเทศ นวัตกรรมคอมพิวเตอร์ สอนเขียนโปรแกรม Php Java Html CSS Javascript C C++ Objective-C และอื่นๆ บนระบบปฏิบัติการ Window Linux Unix CentOS IOS Android
โดยผู้เขียนที่มีความเชี่ยวชาญเฉพาะ ให้บริการพื้นที่สำหรับนักเขียนที่ต้องการแบ่งปันความรู้ พร้อมให้คำปรึกษาแก่ผู้ที่สนใจ โดยไม่เสียค่าใช้จ่าย