คำสั่ง CSS ที่คุณคิดไม่ถึงว่ามันมีด้วยหรอ?

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

Frist line

[css]::first-line { }[/css]

ตัวนี้จะเป็นการเลือกเฉพาะบรรทัดแรกใน paragraph หรือ element นั้นๆ

HTML

[code]

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure suscipit maiores impedit! Magnam culpa sunt tenetur officia sint delectus eligendi blanditiis laboriosam facere pariatur minima tempore voluptatem aliquam, dolore dolores!

[/code]

CSS

[css]p::first-line { color: red; }[/css]

Browser support

  • Chrome 1.0
  • Internet explorer 9.0
  • Firefox 1.0
  • Safari 1.0
  • Opera 7.0

First letter

[css]::first-letter[/css]

ตัวนี้เลือกตัวอักษรตัวแรก คล้ายกับพวกนิตยสารต่างๆ ที่มีข้อความใหญ่ๆ ของตัวอักษรแรก

first letter example

HTML

[code]
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure suscipit maiores impedit! Magnam culpa sunt tenetur officia sint delectus eligendi blanditiis laboriosam facere pariatur minima tempore voluptatem aliquam, dolore dolores!
[/code]

CSS

[css]div::first-letter { color: red; font-size: 3em; float: left; line-height: 1; margin: 0 5px; }[/css]

Browser support

  • Chrome 1.0
  • Internet explorer 9.0
  • Firefox 1.0
  • Safari 1.0
  • Opera 7.0

Not selector

[css]:not(x)[/css]

:not(x) มันจะทำการเลือกทั้งหมดยกเว้นตัวที่เราระบุไว้

HTML

[code]
  • List Item
  • List Item
  • List Item
  • List Item
[/code]

CSS

[css]ul li:not(.active) { color: red; }[/css]

Browser support

  • Chrome 4.0
  • Internet explorer 9.0
  • Firefox 3.5
  • Safari 3.2
  • Opera 9.6

Adjacent sibling combinator

[css]span + span[/css]

วิธีการใช้งานก็คือ มันจะไม่เลือก selector ตัวแรก แต่มันจะเลือกตัวถัดไปจากตัวแรก ดูตัวอย่างจะได้เข้าใจ

HTML

[code]
Lorem ipsum blah blah blah

Lorem ipsum blah blah blah

Lorem ipsum blah blah blah

[/code]

CSS

[css]blockquote + p { font-weight: bold; }[/css]

Browser support

  • Chrome Any
  • Internet explorer 7.0
  • Firefox Any
  • Safari Any
  • Opera Any
ดูตัวอย่างเพิ่มเติมได้ที่ The CSS that you know nothing about

Add new comment