CSS Selectors

ในเนื้อหานี้จะทำการเจาะลึกรายละเอียดของ selector และรูปแบบการใช้งาน selector ทั้งหมด เพื่อเพิ่มทางเลือกและสามารถที่จะใช้การจัดรูปแบบบได้อย่างถูกต้อง และมีประสิทธิภาพสูงสุด

ประเภทของ selector

  1. Simple selectors (เลือก element ตามชื่อ รหัส และ ไอดี)
  2. Combinator selectors (เลือก element มากกว่า 1 ตัวผสมผสานกันได้ )
  3. Pseudo Class and Element selectors (กำหนดการแสดงผลกรณีเกิด event ที่แตกต่างกันออกไป) 
  4. Attribute selectors (เลือก element ที่มีแอตทริบิวต์ตรงกัน)

 

1.Simple selectors

ตัวอย่างที่ 1.1 เลือก element ตามชื่อ

<html>
<head>
<style>
h1{
  text-align:center;
  text-shadow: 2px 2px 3px grey; 
}
p{
  color: red;
}
</style>
</head>
<body>

  <h1>เลือก element ตามชื่อ</h1>
  <p>เนื้อหา</p>

</body>
</html>

ไฟล์ที่ 1.1 selector_name.html

 

ตัวอย่างที่ 1.2 เลือก element ด้วย class

<html>
<head>
<style>
h1{
  text-align:center;
  text-shadow: 2px 2px 3px grey; 
}
div{
  padding: 12px;
  margin: 8px;
}
.border{
  border: 1px solid blue;
  padding: 12px;
  margin: 8px;
}
p{
  color: red;
}
</style>
</head>
<body>

  <h1>เลือก element ด้วยคลาส</h1>
  
  <div class="border">
   <p>เนื้อหาที่ครอบคลุมด้วยคลาส</p>
  </div>
  
  <div>
    <p>เนื้อหาที่ไม่ครอบคลุมด้วยคลาส</p>
  </div>

</body>
</html>

ไฟล์ที่ 1.2 selector_class.html

CSS เข้าถึง class โดยขึ้นต้นด้วยจุด  ตามด้วยชื่อของคลาสที่ต้องการ 

 

ตัวอย่างที่ 1.3 เลือก element ด้วยไอดี

<html>
 <head>
  <style>
   #test{
   	color:grey;
    font-weight:bolder;
    font-size:35px;
   }
  </style>
 </head>
 
 <body>
  <p>เนื้อหาที่ไม่มีการกำหนดไอดี</p>
  
  <p id="test">เนื้อหาที่มีการกำหนดไอดี</p>
 </body>
</html>

ไฟล์ที่ 1.3 selector_id.html

CSS เข้าถึง id โดยขึ้นต้นด้วยจุด  ตามด้วยชื่อของไอดีที่ต้องการ 

 

2.CSS Combinators

css combinators ใช้เลือก element โดยอธิบายถึงความสัมพันธ์ระหว่าง element ซึ่งแบ่งออกเป็น 

  • descendant selector (space)
  • child selector (>)
  • adjacent sibling selector (+)
  • general sibling selector (~)

 

2.1 Descendant Selector เลือก element ทั้งหมดที่อยู่ภายใน element ที่กำหนด

ตัวอย่างที่ 2.1 

<html>
  <head>
    <style>
      div p {
        color: red;
        font-weight:bolder;
      }
    </style>
  </head>
  <body>
    <div>
      <p>เนื้อหาที่ 1</p>
      <a><p>เนื้อหาที่ 2</p></a>
    </div>

    <p>เนื้อหาที่ 3</p>
  </body>
</html>

ไฟล์ที่ 2.1 desc_selector.html

อธิบายไฟล์ที่ 2.1 

  • บรรทัดที่ 4 div  p หมายถึง เลือก element <p> ทั้งหมดที่อยู่ภายใน element <div>
  • บรรทัดที่ 12 และ 13 มี element <p> อยู่ภายใน element <div> ดังนั้นนี้คือ element ที่มีคุณสมบัติตรงกับบรรทัดที่ 4 ต้องการ

 

2.2 Child Selector เลือก element ลูกของ element ที่เลือก

ตัวอย่างที่ 2.2 

<html>
  <head>
    <style>
      div > p {
        color: red;
        font-weight:bolder;
      }
    </style>
  </head>
  <body>
    <div>
      <p>เนื้อหาที่ 1</p>
      <a><p>เนื้อหาที่ 2</p></a>
    </div>

    <p>เนื้อหาที่ 3</p>
  </body>
</html>

ไฟล์ที่ 2.2 child_selector.html

อธิบายไฟล์ 2.2

  • บรรทัดที่ 4 div > p หมายถึง เลือก element <p> ทั้งหมดที่เป็นลูกของ element <div>
  • บรรทัดที่ 12 มีคุณสมบัติถูกต้องตามความต้องการของ บรรทัดที่ 4

 

2.3 Adjacent sibling selector เลือก element ที่อยู่ติดกันถัดจาก element ที่เลือก

ตัวอย่างที่ 2.3

<html>
  <head>
    <style>
      div + p {
        color: red;
        font-weight: bolder;
      }
    </style>
  </head>
  <body>
    <div>
      <p>เนื้อหาที่ 1</p>
      <p>เนื้อหาที่ 2</p>
    </div>

    <p>เนื้อหาที่ 3 ติดกันถัดจาก element ที่เลือก</p>
    <p>เนื้อหาที่ 4</p>
  </body>
</html>

ไฟล์ที่ 2.3 adj.selector.html

อธิบายไฟล์ที่ 2.3

  • บรรทัดที่ 4 div + p หมายถึงเลือก element <p> ที่อยู่ติดกันถัดจาก element <div>
  • บรรทัดที่ 16 มีคุณสมบัติตรงตามที่บรรทัดที่ 4 ต้องการ

 

2.4 General sibling selector เลือก element พี่น้องที่อยู่ถัดไปจาก element ที่เลือก (พี่น้อง คือ element ที่อยู่ระดับเดียวกันนั่นเอง ซึ่งในที่นี้จะเลือกเพียง element น้องเท่านั้น)

ตัวอย่างที่ 2.4

<html>
  <head>
    <style>
      div ~ p {
        color: red;
        font-weight: bolder;
      }
    </style>
  </head>
  <body>
    <p>เนื้อหาที่ 1 พี่</p>
    <p>เนื้อหาที่ 2 พี่</p>
    <div>
      <p>เนื้อหาที่ 1 ลูก</p>
      <p>เนื้อหาที่ 2 ลูก</p>
    </div>

    <p>เนื้อหาที่ 3 element น้อง</p>
     <a href="#">ลิงค์สมมติ 1</a>
    <p>เนื้อหาที่ 4 element น้อง</p>
     <a href="#">ลิงค์สมมติ 2</a><br>
     <a href="#">ลิงค์สมมติ 3</a>
    <p>เนื้อหาที่ 5 element น้อง</p>
  </body>
</html>

ไฟล์ที่ 2.4 gen_sibling_selector.html

อธิบายไฟล์ที่ 2.4 

  • บรรทัดที่ 4 div ~ p หมายถึงเลือก element <p> ทั้งหมดที่เป็น element น้องของ <div> (น้องเกิดหลัง นั่นหมายถึงบรรหลังจากนี้ต่อไป)
  • บรรทัดที่ 18,20 และ 23 คือ element น้องของ element <div> ซึ่งเป็นคุณสมบัติที่ตรงความต้องการของบรรทัดที่ 4

 

3.Pseudo Classes and Element selectors

3.1 Pseudo Classes

ตัวอย่าง Pseudo Classes

Selector ตัวอย่างเช่น คำอธิบาย
:checked input:checked เลือก input ที่มีการเลือก
:disabled input:disabled ปิดการใช้งาน input ที่เลือก
:hover a:hover เมื่อเมาส์เลื่นผ่าน หรือเมาส์อยู่ตรง element ที่กำหนด

ตัวอย่างที่ 3.1 :checked

<html>
  <head>
    <style> 
    input:checked {
      height: 25px;
      width: 25px;
    }
    </style>
  </head>
  <body>
    <form action="">
      <input type="radio" value="male" name="gender"> Male<br>
      <input type="radio" value="female" name="gender"> Female<br>
      <input type="checkbox" value="Bike"> I have a bike<br>
      <input type="checkbox" value="Car"> I have a car 
    </form>
  </body>
</html>

ไฟล์ที่ 3.1 pse_check.html

 

ตัวอย่างที่ 3.2 :disabled

<html>
  <head>
    <style> 
      input[type=text]:enabled {
        background: lightblue;
        padding: 12px;
        margin: 6px;
        width : 45%;
        border:0px;
      }

      input[type=text]:disabled {
        background: lightgreen;
        padding: 12px;
        margin: 6px;
        width: 45%;
        border:0px;
      }
    </style>
  </head>
  <body>
    <form action="">
      First name: <input type="text" value="Pawin"><br>
      Last name: <input type="text" value="Khenphukhiaw"><br>
      Country: <input type="text" disabled="disabled" value="Thailand">
    </form>
  </body>
</html>

ไฟล์ที่ 3.2 pse_disabled_input.html

อธิบายไฟล์ที่ 3.2 บรรทัดที่ 25 เพิ่มแอตทริบิวต์ disabled = “disabled” เป็นการปิดการใช้งาน input 

 

3.2 Pseudo-element

ตารางข้อมูล Pseudo element ทั้งหมด

Selector ตัวอย่าง คำอธิบาย
::after p::after แทรกบางอย่างหลังเนื้อหาของ element </p>
::before p::before แทรกบางอย่างก่อนเนื้อหาของ element </p>
::first-letter p::first-letter เลือกตัวหนังสือตัวแรกของ element <p>
::first-line p::first-line เลือกตัวหยังสือบรรทัดแรกทั้งหมดของ elemenr <p>
::selection p::selection เลือกขตัวหนังสือที่ผู้ใช้ไฮไลท์

 

ตัวอย่างที่ 3.3 ::before and ::after

<html>
  <head>
    <style>
      p::before { 
        content: "ยินตีต้อนรับ";
        background-color: yellow;
        color: red;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <p>My name is Donald</p>
    <p>I live in Ducksburg</p>
  </body>
</html>

ไฟล์ที่ 3.3 pse_before.html

ไฟล์ที่ 3.3 เพิ่มข้อความ “ยินดีต้อนรับ” ด้านหน้าเนื้อหาของ element <p>

 

ตัวอย่างที่ 3.4 ::after

<html>
  <head>
    <style>
      p::after{
       content: "ขอบคุณที่อ่านครับ";
       color: blue;
      }
    </style>
  </head>
  <body>
    <p>My name is Donald</p>
    <p>I live in Ducksburg</p>
  </body>
</html>

ไฟล์ที่ 3.4 pse_after.html

ไฟล์ที่ 3.4 เพิ่มข้อความ “ขอบคุณที่อ่านครับ” ด้านหลังเนื้อหาของ element <p>

 

4.Attribute selectors 

เป็นการเลือก element ที่มีคุณสมบัติพิเศษระบุไว้

ตัวอย่างที่ 1 เลือก element <a> ที่มีคุณสมบัติเป็น target และมีค่าเท่ากับ _blank

<html>
  <head>
    <style>
      *{
        margin:8px;
      }
      a[target=_blank] {
        background-color: rgb(59, 200, 255);
        padding:12px;
        border-radius:6px;
        text-decoration: none;
        color:white;
      }
      a[target=_blank]:hover{
        opacity:0.5;
      }
    </style>
  </head>
  <body>
      <a href="#">Link 1</a>
      <a href="#" target="_blank">Link 2</a>
      <a href="#" target="_top">Link 3</a>
  </body>
</html>

ไฟล์ที่ 4.1 att_selector.html

ไฟล์ที่ 4.1 ผลลัพธ์จะแสดงความแตกต่างของ element <a> ที่มีคุณสมบัติเป็น target=”_blank”

หากคุณพบคำที่สะกดผิด เว้นวรรคไม่ถูกต้อง ฯ โปรดแจ้งให้เราทราบ โดยลากคลุม (highlight) ข้อความนั้น แล้วกด Ctrl + Enter

ไม่สามารถคัดลอกเนื้อหานี้

Spelling error report

The following text will be sent to our editors: