css selector ที่เราใช้อยู่ จำแนกตามประเภทของการ select ได้ทั้งหมดเป็น 9 แบบ ดังนี้
1. Universal Selector
2. Type Selector
3. Class Selector
4. ID Selector
5. Contextual Selector
6. Pseudo Element และ Pseudo Class Selector
7. Direct Child Selector
8. Adjacent Sibling Selector
9. Attribute Selector
1. Universal Selector คือการ select ทุก element โดยใช้ สัญลักษณ์ * (star) ดังนี้
*{ /* ทุก element ใน body ของหน้า html นั้นๆ */
margin : 0px;
padding : 0px;
position : static;
font-family : arial;
font-size : 10pt;
background-color : white;
}
2. Type Selector คือการ select tag html นั่นเอง เช่น
html
<body>
<span>
<div>
</div>
</span>
</body>
css
body{
}
span{
background-color : red; /* tag span ทุกตัวจะมี background เป็นสีแดง */
}
div{
height : 20px; /* tag div ทุกตัวจะมีความสูง 20 pixel */
}
3. Class Selector คือการ select class css นั่นเอง
html
<body class="project">
<span class="wrapper">
<div class="in-wrapper">
</div>
</span>
</body>
css
.project{
}
.wrapper{
position : relative; /* ทุก tag ที่มี class .wrapper อยู่จะมี position เป็น relative */
}
.in-wrapper{
font-size : 12pt; /* ทุก tag ที่มี class .in-wrapper อยู่ จะมีขนาดตัวหนังสือ 20 pt */
}
4. ID Selector คือการ select tag html ที่มีการกำหนด id เอาไว้ เช่น
html
<body id="root">
<span id="content-wrapper">
<div id="content">
</div>
</span>
</body>
css
#root{ /* tag ที่มี id เป็น root */
margin : 0px;
padding : 0px;
}
#content-wrapper{
width : 100%;
}
#content{ /* tag ที่มี id เป็น content */
border : 1px solid #ddd;
}
5. Contextual Selector คือการ select ทุก element x ที่อยู่ภายใน elemet y หนึ่งๆ โดยจะส่งผลไปถึงลูก หลาน เหลน โหลน ... ของ element นั้นๆด้วย เช่น
html
<body>
<span> <!-- body span -->
<div> <!-- body span div -->
<p>
</p>
</div>
<span> <!-- body span span -->
</span>
<h1>
<a href="#"> <!-- body span h1 a -->
</a>
</h1>
</span>
</body>
css
span *{ /* ทุก element ใน tag span ซึ่งจะเป็น tag อะไรก็ได้ที่อยู่ใน span */
position : relative;
}
span div{ /* ทุก element div ที่อยู่ภายใน span ไม่ว่าจะเป็นลูก หรือหลาน หรือเหลน ... ก็ได้*/
min-height : 80px;
padding : 5px 3px 2px 5px;
}
span h1 a{ /* ทุก element a ที่อยูภายใน h1 และ h1 ต้องอยู่ภายใน span เท่านั้น */
max-width : 500px;
}
span div p{ /* ทุก element p ที่อยูภายใน div และ div ต้องอยู่ภายใน span เท่านั้น */
border : solid #ddd;
border-width : 1px 0px 2px 1px;
}
6. Pseudo Element และ Pseudo Class Selector คือการ select โดยมีสัญลักษณ์ : (colon) เข้ามาช่วย มีหน้าที่พิเศษสำหรับทำงานบางอย่าง ดังนี้
Pseudo Element ผมมองว่ามันใช้สำหรับ อ้างถึงและกระทำการบางอย่างกับ element นั้นๆ เช่น
css
h1:before{
content:url(smiley.gif); /* หน้า tag h1 ให้แสดงรูปภาพ smiley.gif */
}
h1:after{
content:url(angry.gif); /* หลัง tag h1 ให้แสดงรูปภาพ angry.gif */
}
p:first-letter{ /* ตัวอักษรตัวแรกของ tag p ให้เป็นตัวสีแดง มีขนาดใหญ่ */
color: red;
font-size:xx-large;
}
p:first-line {
color: blue; /* ตัวหนังสือในบรรทัดแรกของ tag p ให้เป็นสีน้ำเงิน */
}
p:first-child {
background-color: green; /* element ที่อยู่ภายใน p ตัวแรกให้มีพื้นหลังเป็นสีเขียว */
}
Pseudo Class Selector คล้ายกับ Pseudo Element แต่หน้าที่ของมีคือการ add remove หรือ สลับสับเปลี่ยน Class ให้กับ element นั้นๆ เช่นcss
a:link{ /* ทำให้ link ไม่มีเส้นใต้ และ link มีสีน้ำเงิน*/
text-decoration : none;
color : blue;
}
a:hover{ /* เมื่อเอาเมาส์ไปวางบน link จะเปลี่ยนเป็นสีแดง และมีเส้นใต้*/
text-decoration : underline;
color : red;
}
a:active{ /* เมื่อทำการคลิก link จะเป็นสีเหลือง ตัวหนังสือหนา และมีเส้นใต้ */
text-decoration : underline;
font-weight : bold;
color : yellow;
}
a:visited{ /* link ใดที่เคยเข้าชมแล้ว จะมีสีเขียว ไม่มีเส้นใต้ */
text-decoration : none;
color : green;
}
7. Direct Child Selector คล้ายๆ Contextual Selector แต่ จะมีผลเฉพาะ ลูกของมันเท่านั้น จะไม่ส่งผลถึงหลาน เหลน หรือ โหลน เหมือน Contextual
css
span > div{ /* div ที่เป็นลูกของ span โดยตรงเท่านั้น */
width : 600px;
}
div > span > a{ /* a ซึ่งเป็นลูกของ span และ span ต้องเป็นลูกของ div เท่านั้น */
color : red;
}
8. Adjacent Sibling Selector คือการ select element ที่อยู่ติดกัน และอยู่ในระดับเดียวกันเท่านั้น เช่น
css
span+span{ /* tag span ที่อยู่ติดกัน และอยู่ในระดับเดียวกันเท่านั้นที่จะมีพื้นหลังเป็นสีแดง */
background-color : red;
}
div+span{
color : blue;
}
และสุดท้าย
9. Attribute Selector เอาไว้ select tag ที่มี attribute ที่มีค่าตามที่กำหนดไว้ เช่น
css
div[class=box]{ /* tag div ซึ่งมี attribute class เป็น box*/
background-color : pink;
}
a[href$=profile.html]{ /* tag a ซึ่งมี attribute href ลงท้ายด้วย profile.html */
color : red;
}
span[name^=button][name$=blue]{ /* tag span ซึ่งมี attribute name ขึ้นต้นด้วยคำว่า button และ name ที่ลงท้ายด้วย blue */
margin : 5px;
}
ตัวผมเอง ต้องทำหน้าที่ปรับแต่ง css ของ framework หน้าบ้านประจำ ก็เลยได้ใช้จนแทบจะทั้งหมดที่กล่าวมาครับ สำคัญทุกตัวจริงๆ ทุกตัวสามารถนำมาผสมกลมกลืนกัน เพื่อสร้างผลงานหน้าเว็บของเราให้ดูดีสวยงามตามที่เราต้องการได้เหมือนเสกเวทมนต์เลยทีเดียว และเราสามารถนำความรู้เรื่อง css selector ไปใช้ต่อยอดกับ jQuery Selector ได้ด้วยเพราะ jquery selector โดยส่วนมากก็มาจาก css selector เพียงแค่มีการปรับแต่งเพิ่มเติมขึ้นมาก็เท่านั้นเองครับ
ผมหวังว่ามันคงจะเป็นประโยชน์ได้บ้างน่ะครับ สำหรับใครที่ยังไม่เข้าใจ selector ของ css
ไม่มีความคิดเห็น:
แสดงความคิดเห็น