home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

CSS Selectors: คู่มือการใช้งาน Selectors ทั้งหมด

CSS selectors เลือก elements ที่จะใช้ styles Selector พื้นฐานที่สุดคือ element selector เลือก element ด้วยชื่อ Selectors อื่นๆ รวม id, class, universal, descendant selectors

Selectors เป็นหนึ่งในสองส่วนของ CSS statement ใดๆ ใช้ target elements บน HTML page สำหรับ style เฉพาะ

มี CSS selectors หลากหลาย ใช้ target elements บน web page ได้อย่างแม่นยำ ให้ customization ระดับสูงเวลา design

คู่มือสำรวจพื้นฐาน selectors ใน CSS และการใช้ commonly-used selectors ในโค้ด

CSS Selectors

CSS selectors ระบุ HTML elements ที่ต้องการ apply CSS style Selectors เลือก elements ตาม name, ID, class, attributes อื่นๆ Selectors ปรากฏก่อน brackets ใน CSS rule

ใน CSS rules ใช้ define styles ที่ควร apply กับ element หรือ range of elements Rules มี 2 components: selectors และ declarations

ตัวอย่าง rule ใน CSS:

h1 { color: pink; }

CSS rule นี้ตั้งค่าสีของทุก h1 elements บน web page เป็นสีชมพู 2 components:

  • h1 element ที่ style จะใช้ เรียกว่า selector
  • color: pink style ที่ใช้กับ elements ใน selector เรียกว่า declaration ตัวอย่างเปลี่ยนสีทุก h1 elements เป็นชมพู

CSS selectors เป็นพื้นฐานสำคัญของ web styles Selectors ให้บอก browser ว่า elements ไหนควรใช้ style เฉพาะ เช่น selector สั่ง browser style ทุก <h1> elements หรือทุก <p> elements บน web page

CSS Selector Types

CSS เสนอ selectors หลากหลาย มาสำรวจตัวอย่าง main selectors ที่คุณจะพบขณะ design CSS rules

CSS Element-Based Selector

Element-based selector ให้ใช้ style กับทุก instances ของ element ใน document ที่ rule ตรงกัน เช่นใช้ element selector ใช้ style กับทุก <p> tags บน page

สมมติต้องการเปลี่ยนสี paragraph-based text ทั้งหมดบน web page เป็นสีเทา ใช้โค้ด:

p { color: gray; }

Declarations ภายใน "p" selector จะใช้กับทุก paragraph (HTML <p> tag) บน web page

CSS id Selector

CSS id selector select HTML element บน page จาก ID HTML IDs เป็น unique ดังนั้น id selector ใช้ apply styles กับ single element บน web page Syntax: hash sign ตามด้วย element ID

สมมติต้องการตั้งค่า CSS height attribute ของ element "box9" บน page เป็น 150px ใช้โค้ด:

#box9 { height: 150px; }

Rule นี้ตั้งค่าความสูงของ element id "box9" เป็น 150px

CSS Class Selectors

CSS class selectors หา elements ที่มี class attribute เฉพาะ Syntax: period (.) ตามด้วยชื่อ class ที่ต้องการ select

เช่น ต้องการ target class "boxMiddle" ใช้ selector ".boxMiddle"

สมมติ design box บน web page box ควรมี pink background color box มี class "pinkBox" ใช้ styles โค้ด:

.pinkBox { color: pink; }

ทุก element บน web page ที่มี class "pinkBox" จะถูกตั้งค่าเป็นสีชมพู

เพิ่มเติม: สามารถระบุว่าเฉพาะ specific elements ที่มี class เฉพาะจะได้รับผลจาก style ถ้าใช้ class selector อย่างเดียว ทุก element ที่มี class นั้นจะได้รับผล

ถ้าใช้ class selector นำหน้าด้วย element type ใช้ style เฉพาะ specific elements ที่มี class นั้น สมมติต้องการ background color ของทุก HTML <div> tag ที่มี class "pinkBox" เป็นสีชมพู Style:

div.pinkBox { color: pink; }

Style นี้ใช้กับทุก <div> tag ที่มี class "pinkBox" เท่านั้น

CSS Universal Selector

CSS universal selector select ทุก elements บน web page Selector แทนด้วย asterisk (*) ตามด้วยไม่มี element names มักใช้ตั้ง margins หรือ default fonts สำหรับ web page

สมมติต้องการทุก elements บน web page aligned ไปกึ่งกลาง ใช้โค้ด:

* { text-align: center; }

Rule นี้ใช้ style "text-align: center;" กับทุก item บน web page

CSS Descendant Selectors

CSS descendant selectors select element ที่เป็น descendant ของ element อื่นที่ style ควรใช้ Syntax: ระบุ element, space, descendant element ที่ต้องการ select

สมมติต้องการ background color ของทุก links ใน list เป็นสีเหลือง แต่ไม่อยากให้ style นี้ affect links อื่นๆ บน web page ใช้โค้ด:

li a { background-color: yellow; }

Style ใช้ "li a" descendant selector หมายถึง style จะใช้กับทุก <a> tags ใน HTML <li> tag เท่านั้น Style ไม่ใช้กับ <a> tags อื่นๆ ที่ปรากฏบน web page

CSS Selector Lists

ถ้ามี more than one element ที่ specific style ควรใช้ ใช้ selector list Selector lists ใช้ rule กับทุก individual selectors ใน list

สมมติมี 2 CSS rules ที่มี style rules เหมือนกัน:

h2 { text-align: center; } .alignCenter { text-align: center; }

ทำให้ code อ่านง่ายขึ้นโดย combine 2 rules เป็น selector list ใส่ comma ระหว่าง styles:

h2, .alignCenter { text-align: center; }

Code ทำงานเหมือนตัวอย่างแรก แต่ตัวอย่างที่สองใช้ selector list ทำให้ code concise มากขึ้น

CSS Grouping Selectors

CSS grouping selector ใช้ set of styles กับ multiple selectors ใช้ลด repetition ช่วยเขียน code ชัดเจน Syntax: list of element selectors คั่นด้วย comma ตามด้วย CSS rules ที่ต้องการใช้กับ elements

สมมติ design web page ใช้ styles:

h1 { text-align: center; font-size: 32px; font-weight: normal; } h2 { text-align: center; font-size: 24px; font-weight: normal; } h3 { text-align: center; font-size 18px; font-weight: normal; }

ในโค้ด "font-weight: normal;" และ "text-align: center;" styles เหมือนกันทุก selectors เพื่อลด repetition group styles นี้ด้วย grouping selector โค้ด:

h1, h2, h3 { text-align: center; font-weight: normal; } h1 { font-size: 32px; } h2 { font-size: 24px; } h3 { font-size: 18px; }

Group 2 styles ที่เหมือนกันตลอดทุก tag ทำให้ code อ่านง่ายขึ้น

สรุป

CSS selectors ให้ใช้ style กับ particular element หรือ range of elements บน web page มี selectors หลากหลายจาก CSS รวม id selectors, class selectors, grouping selectors ใช้สร้าง precise CSS styles

บทความแค่ขูดเฉพาะพื้นผิวของ selectors ใน CSS ยังมี attribute selectors, pseudo-classes, pseudo-elements, combinators และ selectors อื่นๆ ใช้ใน CSS หากต้องการ develop advanced rules ควร research selectors เหล่านี้ลึกขึ้น

บทเรียนอภิปรายพร้อมตัวอย่างการใช้ commonly-used selectors ใน CSS ตอนนี้คุณมีความรู้ใช้ CSS selectors สร้าง styles เหมือน expert

คำแนะนำ top CSS learning resources, courses, books ดู How to Learn CSS guide