Pseudo-classes

Pseudo-classes คืออะไร

Pseudo-classes เป็นเครื่องมือใน CSS ที่จะช่วยปรับแต่ง style ตามสถานะต่างๆของ Element ยกตัวอย่างเช่น เปลี่ยนสีปุ่มเมื่อเมาส์เข้าไปวางอยู่บนปุ่ม หรือ กำหนดสีของลิงค์ที่เยี่ยมชมแล้วกับยังไม่ได้เยี่ยมชม เป็นต้น

ไวยากรณ์การเขียน Pseudo-classes (Syntax)

Loading...

ตัวอย่าง Pseudo-classes สำหรับลิงก์

<style>
  /* ลิงก์ที่ยังไม่ได้เยี่ยมชม */
  a:link { 
    color: red; 
  } 
  /* ลิงก์ที่เยี่ยมชมแล้ว */
  a:visited { 
    color: pink; 
  }   
  /* เมื่อวางเมาส์เหนือลิงก์ */
  a:hover { 
    color: green;
  }      
  /* ขณะกดลิงก์ */
  a:active { 
    color: blue; 
  }     
</style>

<a href="#">Link</a>

การใช้ Pseudo-classes ร่วมกับ Class และ ID

Pseudo-classes สามารถใช้ร่วมกับ Class และ ID ได้ โดยใช้เครื่องหมาย . และ # ตามลำดับ ดังตัวอย่าง

Loading...

Loading...

Pseudo-class :hover

:hover คือเครื่องมือที่ใช้กำหนดสไตล์เมื่อเมาส์วางอยู่เหนือ Element

ตัวอย่างการใช้ :hover

<style>
  a {
    color:blue;
    text-decoration:none;
  }
  a:hover {
    color:red;
    text-decoration:underline;
  }
  p:hover {
    background-color:yellow;
    cursor:pointer;
  }
</style>
<div class="container">
  <a href="#">Hover me</a>
  <p>Hover me</p>
</div>

Pseudo-class :focus

:focusใช้กำหนดสไตล์เมื่อองค์ประกอบได้รับการเลือกหรือคลิก

ตัวอย่างการใช้ :focus

<style>
  input:focus {
    outline: 20px solid red;
    box-shadow: 0 0 5px rgba(0,0,255,0.5);
  }
  button:focus {
    background-color: lightblue;
  }
</style>

<input
  type="text"
  placeholder="Type here"
/>
<button>Click me</button>

Pseudo-classes :first-child และ :last-child

:first-child คือ Pseudo-classes ที่เลือก Element แรกภายในคอนเทนเนอร์

:last-child คือ Pseudo-classes ที่เลือก Element สุดท้ายภายในคอนเทนเนอร์

ตัวอย่างการใช้ :first-child และ :last-child

<style>
  li:first-child {  
    color: blue;  
    font-weight: bold;  
  }
  li:last-child {
    color: red;
    font-weight: bold;
  }
</style>
<ul>
  <li>รายการที่ 1</li>
  <li>รายการที่ 2</li>
  <li>รายการที่ 3</li>
  <li>รายการที่ 4</li>
  <li>รายการที่ 5</li>
  <li>รายการที่ 6</li>
</ul>

<style>
  p:first-child {  
    color: blue;  
    font-weight: bold;  
  }
</style>
<div>
  <h1>Header 1</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
</div>

<style>
  p:first-of-type {  
    color: blue;  
    font-weight: bold;  
  }
</style>
<div>
  <h1>Header 1</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
</div>