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

web 2.0Saturday, November 8, 2014 - 14:01

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

Frist line

::first-line { }

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

HTML

<p>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!</p>

CSS

p::first-line { color: red; }

Browser support

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

First letter

::first-letter

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

first letter example

HTML

<div>
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!
</div>

CSS

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

Browser support

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

Not selector

:not(x)

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

HTML

<ul>
    <li>List Item</li>
    <li>List Item</li>
    <li class="active">List Item</li>
    <li>List Item</li>
</ul>

CSS

ul li:not(.active) { color: red; }

Browser support

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

Adjacent sibling combinator

span + span

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

HTML

<section>
    <blockquote>Lorem ipsum blah blah blah</blockquote>
    <p>Lorem ipsum blah blah blah</p>
    <p>Lorem ipsum blah blah blah</p>
</section>

CSS

blockquote + p { font-weight: bold; }

Browser support

  • Chrome Any
  • Internet explorer 7.0
  • Firefox Any
  • Safari Any
  • Opera Any

ดูตัวอย่างเพิ่มเติมได้ที่ The CSS that you know nothing about

แนะนำให้อ่าน

แสดงความคิดเห็น