CSS - Selectors ใน CSS

การออกแบบด้วย CSS (Cascading Style Sheets) เป็นสิ่งที่ขาดไม่ได้เลยในยุคปัจจุบันเมื่อเราต้องการสร้างเว็บไซต์ที่มีหน้าตาที่สวยงามและตอบสนองต่อผู้ใช้ได้ดี ตัว CSS เองมีหลากหลายส่วนประกอบ แต่วันนี้เราจะมาลงลึกถึง "Selectors" ซึ่งทำหน้าที่เลือกองค์ประกอบ (Element) ของ HTML ที่เราต้องการจัดรูปแบบ ในกรณีที่ใช้ CSS ทำให้เราควบคุมการแสดงผลของหน้าเว็บได้ง่ายและมีประสิทธิภาพมากยิ่งขึ้น

เบื้องต้นเกี่ยวกับ CSS Selectors

Selector ใน CSS เป็นที่ที่เราระบุว่า CSS กฎข้อไหนจะถูกนำไปใช้กับองค์ประกอบอะไรใน HTML ตัวอย่างเช่น ถ้าเราต้องการเปลี่ยนสีของแอตทริบิวต์ `<h1>` ทุกตัวในหน้าเว็บของเรา Selectors จะเป็นเครื่องมือที่เราจะใช้เพื่อบรรลุจุดประสงค์นี้

ประเภทของ CSS Selectors

   h1 {
       color: blue;
   }

   .highlight {
       background-color: yellow;
   }

   #header {
       font-size: 24px;
   }

   a[target="_blank"] {
       color: red;
   }

   * {
       margin: 0;
       padding: 0;
   }

   div p {
       color: green;
   }

   ul > li {
       list-style-type: none;
   }

- Pseudo-class: `:hover`, `:first-child`

     a:hover {
         font-weight: bold;
     }

- Pseudo-element: `::before`, `::after`

     p::first-line {
         font-weight: bold;
     }

Use Case: สถานการณ์การเลือกใช้ Selectors

เพื่อให้เห็นภาพดียิ่งขึ้น ขอยกตัวอย่างการใช้งานในสถานการณ์จริง:

เราต้องการสร้างหน้าเว็บบล็อกส่วนตัวที่มีส่วนแสดงผลชื่อเรื่อง เป้าหมายของเราคือเน้นชื่อบล็อกด้วยสีพิเศษในทุก ๆ ส่วนหัว, แยกหมวดหมู่ด้วยพื้นหลังสีที่ต่างกัน และให้รายการทั้งหมดในแต่ละหมวดไม่แสดงเครื่องหมายลำดับ

โค้ด HTML:

<h1 class="blog-title">My Awesome Blog</h1>
<div class="category tech">
    <h2>Tech</h2>
    <ul>
        <li>Article 1</li>
        <li>Article 2</li>
    </ul>
</div>
<div class="category life">
    <h2>Life</h2>
    <ul>
        <li>Article A</li>
        <li>Article B</li>
    </ul>
</div>

โค้ด CSS:

.blog-title {
    color: darkorange;
}

.category.tech {
    background-color: lightblue;
}

.category.life {
    background-color: lightgreen;
}

.category > ul > li {
    list-style: none;
}

h2:hover {
    color: purple;
}

ในตัวอย่างนี้ เราใช้ class selector และ child selector เพื่อสร้างหน้าเว็บตามที่เราต้องการ

สรุป

Selectors ใน CSS เป็นเครื่องมือที่สำคัญอย่างยิ่งในการจัดการสไตล์ลิ่งของเว็บไซต์ การเข้าใจและใช้งาน Selectors อย่างถูกต้องสามารถทำให้การออกแบบและพัฒนาเว็บเป็นเรื่องที่ง่ายและมีประสิทธิภาพมากขึ้น ซึ่งจะสะท้อนผลในการสร้างประสบการณ์ที่ดีแก่ผู้ใช้งาน

หากคุณอยากฝึกฝนทักษะการเขียนโปรแกรมและพัฒนาเว็บของคุณให้เพิ่มมากขึ้น คอร์สที่ EPT อาจเป็นจุดเริ่มต้นที่ดี ที่นี่มีคอร์สที่ครอบคลุมตั้งแต่ระดับพื้นฐานไปจนถึงขั้นสูง เชื่อมั่นได้ในคุณภาพการเรียนรู้ที่มุ่งเน้นการใช้งานจริง และการวิพากษ์วิจารณ์อย่างสร้างสรรค์เพื่อการพัฒนาที่ดีที่สุด

หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง

หากเจอข้อผิดพลาด หรือต้องการพูดคุย ติดต่อได้ที่ https://m.me/expert.Programming.Tutor/