CSS selector

March 15, 2022

CSS selector

ประเภทของ selector ได้แก่

Type
Class
ID
selectors

เริ่มจาก type selector คือ การเลือก tag name หรือ element

เช่น

<p>Paragraph</p>

<h1>Heading</h1>

<span> Span </span>

the universal selector * การเลือกโดยใช้เครื่องหมายดอกจัน คือการเลือกทั้งหมดแม้ว่าจะเป็น tag child ที่อยู่ใน tag parentก็ตาม ส่วนมากจะเอาไว้ใช้ลบ defualt ของ h1 , p เพื่อ reset ค่าที่เป็น defualt ของ browser

* {
  margin: 0;
}

ประโยชน์ของ universal selector ช่วยให้ selector ของเรา อ่านง่ายขึ้น

article :first-child {
  font-weight: bold;
}


article *:first-child {
  font-weight: bold;
}

ทั้งสองทำงานเหมือนกันแต่สามารถอ่านง่ายขึ้น?

ID selector

การใช้ ID มีความยุ่งยากในการจัดการเพราะมีความ Specificity ที่สูงกว่า class เช่น id สามารถกำหนดได้แค่ id เดียว ใน tag ส่วนคลาส จะใส่ยาวถึงดาวอังคารก็ยังได้ การใช้ id หลายครั้งในหน้าเดียวกันเพื่อวัตถุประสงค์ที่จะ styling เป็นเรื่องที่ควรระวังเป็นอย่างยิ่งทางที่ดีใช้ class จะดีกว่า

Attribute selectors

HTML attributes สามารถใช้ CSS selector เลือก html atributes มาใช้ได้และมีประโยชน์อย่างมากในกหารใช้งาน โดยการ select attribute นั้นมีวิธีการเลือกหลายแบบได้แก่

Pseudo-classes and pseudo-elements

Pseudo-classes ถูกสร้างขึ้นมาเพื่อเข้าถึง state ของ elecment ที่ถูกเลือก เช่น :hover ที่เราสามารถเปลี่ยนสีหรือขนาดด้วยการเอาเมาส์ไปชี้ตรงสิ่งนั้น Pseudo-classes มีไว้ Dom tree ที่ selectors อื่นๆ ไม่สามารถเข้าถึงได้และ Pseudo-classes ยังมีชื่อเรียกและวิธีการใช้หลายแบบมาก ๆ ไม่เคยจำเลยใช้อย่างเดียววันนี้เลยจะมากเรียกชื่อให้ถูกและอธิบายตัวอย่างคร่าวๆ

เริ่มจาก

Linguistic pseudo-classes (/liNGˈɡwistik/) ตามชื่อเลยเราสามารถใช้มันเพื่อเรียก attribute ที่กำหนดค่า lang

syntax :lang (<language-code>)

ตัวอย่างเช่น

<p lang="it">hi</p>

p:lang (it) {
  background: yellow;
}

เลือกเฉพาะ ค่าที่เป็นภาษาอิตาเลี่ยนเท่านั้น

location pseudo-clases พวก link ต่าง ๆ :link :tarket
user action pseudo-clases พวกที่เป็น user action ต่างๆ เช่น :hover:focus etc
Time-dimensional pseudo-classes อันนี้เหมือนจะไม่ค่อยได้ใช้เท่าไหร่ แต่มันใช่สำหรับ tag ที่มีจังหวะเวลาอย่างพวก caption บนวิดิโอ (WebVTT) ตัวอย่าง pseudo-classes เช่น :current :past :future
The input pseudo-classes ใช้เลือกพวก form element based on HTML attributes เช่น input , : check 6. Tree-structural pseudo-classes คือ pseudo class เราสามารถเข้าถึง document tree ได้พวกที่เรียกว่า Tree-structural pseudo-classes จะยกตัวอย่างเช่น ul > li หากเราจะเข้าถึง li ตัวแรก

li:first-child {
  color: orange;
}

Pseudo-elements

_ “A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element (s) .” _

selector::pseudo-element {
  property: value;
}

ตัวอย่าง psudo element เช่น::before ::after มาถึงตรงนี้ก็สงสัยยว่า element กับ class ต่างกันยังไงเริ่มจาก syntax ของ element จะใช้ :: ในขณะที่ class จะใช้ :แต่จริงๆ แล้วจะให้อันเดียวหรือสองอัน browser ส่วนมากก็สามารถรองรับได้ทั้งสองแบบ

Combinators

Combinators มาจาก คำว่า combine คือการรวมกันนั่นเองโดย combinators มีทั้งหมด 4 ประเภทได้แก่

Descendant Selector
Child Selector
Adjacent Sibling Selector
General Sibling Selector

Descendant Selector คือการเลือก element ทั้งหมดที่อยู่ข้างใน ตัวอย่าง div p คือ p ทั้งหมดที่อยู่ใน div Child combinator คือการเลือก element ที่อยู่ข้างในelement div > p แต่ต่างกับ Descendant คือมันจะเลือกแค่ p ที่อยู่ใน div แต่ไม่เลือก p ที่อยู่ข้างในอีกทีนึง

h1 > p {
  font-weight: bold;
  background-color: #333;
  color: #fff;
  padding: 0.5em;
}

Adjacent Sibling Selector คือการเลือก element ที่อยู่ติดกัน (adjacent) โดยใช้เครื่องหมาย + ตัวอย่าง

h1 + p {
  font-weight: bold;
  background-color: #333;
  color: #fff;
  padding: 0.5em;
}

General Sibling Selector คือการเลือก element ที่เป็น siblings ทั้งหมดไม่ใช่แค่ตัวที่อยู่ติดกัน โดยใช้เครื่องหมาย ~

h1 ~ p {
  font-weight: bold;
  background-color: #333;
  color: #fff;
  padding: 0.5em;
}

การใช้ selector จะเห็นได้ว่าเราสามารถใช้ selector ได้เยอะมากนอกจาก class กับ ID

จบ