Rabbitinblack

Tag: pseudo-class

  • [CSS3] Pseudo-Classes

    [CSS3] Pseudo-Classes

    ผมจะเริ่มโดยใช้ HTML ตัวนี้นะครับ

    [html]
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Pseudo-Classes</title>
    <link rel="stylesheet" href="style.css">
    </head>

    <body>
    <div id="post">
    <h3 class="post_text">ABC</h3>
    <p class="post_text">ABC</p>
    <h3 class="post_text">ABC</h3>
    <p class="post_text">ABC</p>
    <h3 class="post_text">ABC</h3>
    <p class="post_text">ABC</p>
    <h3 class="post_text">ABC</h3>
    <p class="post_text">ABC</p>
    <h3 class="post_text">ABC</h3>
    <p class="post_text">ABC</p>
    </div>
    </body>
    </html>
    [/html]

    Pseudo-Classes :root

    สำหรับ :root ผมรู้สึกว่า มันทำหน้าที่ selector เหมือนกับเราสั่งกับ body อะไรแบบนั้นอะครับ อย่างเช่น

    [css]
    :root {background:pink;}
    [/css]

    เราเลยได้ผลลัพธ์ออกมาเป็นแบบนี้ครับ

    [CSS3] Pseudo-Classes [1]

    :root มันคือการเลือก root ของตัว document ซึ่งผลที่ได้ก็คือ หน้าเว็บของเรามีพื้นหลังเป็นสีชมพู

    Pseudo-Classes :nth-child(n)

    สำหรับตัว :nth-child(n) นั้น มันก็คือการเลือกลำดับที่นั่นละครับ อย่างเช่นเราต้องการให้ตัว element ลำดับที่ 4 ใน id post มีขนาดตัวอักษรใหญ่ขึ้น แล้วเป็นสีเขียว เราก็เขียนไปว่า

    [css]
    #post :nth-child(4) {font-size:30px;color:green;}
    [/css]

    ผลลัพธ์ที่ได้ออกมาก็จะเป็น

    [CSS3] Pseudo-Classes [2]

    แล้วถ้าเราจะเลือกเป็น tag h3 ที่อยู่ในลำดับที่ 4 ใน id post ละ งั้นก็เขียนแบบนี้แล้วกัน

    [css]
    #post h3:nth-child(4) {font-size:30px;color:green;}
    [/css]

    ผลลัพธ์ออกมาเราก็จะได้ tag h3 ลำดับที่ 4 มีขนาดใหญ่ขึ้น เป็นสีเขียว

    [CSS3] Pseudo-Classes [1]

    อ้าว เฮ้ย ไม่เห็นได้เลย ก็เพราะว่าตัว :nth-child(4) นั้น มันจะวิ่งดูใน id post ว่าตัวไหนเป็นลำดับที่ 4 แล้วค่อยมาดูว่าลำดับที่ 4 ตรงกับ selector ที่เรากำหนดไว้หรือเปล่า ซึ่งในตัวอย่างลำดับที่ 4 มันต้องเป็น tag p ไม่ใช่ tag h3 ดังนั้นมันเลยไม่แสดงผลที่เรากำหนด

    ดังนั้นถ้าเราต้องการให้ tag h3 ในลำดับที่ 4 มันแสดงผลแบบที่เราต้องการ ก็ต้องนับก่อนมันอยู่ลำดับที่เท่าไหร่ใน id post ซึ่งเราก็จะได้ว่า

    [css]
    #post h3:nth-child(7) {font-size:30px;color:green;}
    [/css]

    คราวนี้มาดูผลลัพธ์ว่าตรงกับที่เราต้องการมั้ย

    [CSS3] Pseudo-Classes [3]

    ตรงกับที่เราต้องการแล้ว แต่แบบนี้มันก็ลำบากนะ ต้องมานับเองว่ามันจะอยู่ในลำดับที่เท่าไหร่ใน id post มันน่าจะมีวิธีที่ง่ายกว่า ซึ่งมันก็มีครับคือการใช้ :nth-of-type(n)

    Pseudo-Classes :nth-of-type(n)

    สำหรับ :nth-of-type(n) นั้นจะแบ่งตามประเภทของ element เลยครับ อย่างเช่น เราจะเลือกลำดับที่ 3 นะครับ

    [css]
    #post :nth-of-type(3) {font-size:30px;color:green;}
    [/css]

    เราก็จะได้ผลลัพธ์ออกมาเป็น

    [CSS3] Pseudo-Classes [4]

    จะเห็นว่า tag h3 และ tag p ที่อยู่ในลำดับที่ 3 เป็นตัวใหญ่สีเขียวทั้งคู่ เพราะว่ามันแบ่งแยกลำดับตาม element

    คราวนี้จากตัวอย่างของหัวข้อที่แล้ว เราจะมาเลือก tag h3 ลำดับที่ 4 กันใหม่ โดยใช้ :nth-of-type(n) แทนตัว :nth-child(n)

    [css]
    #post h3:nth-of-type(4) {font-size:30px;color:green;}
    [/css]

    ผลลัพธ์ที่ได้ก็จะเป็น

    [CSS3] Pseudo-Classes [3]

    ซึ่งแบบนี้ก็จะง่ายกว่าที่เราต้องมานับลำดับในแบบของ :nth-child(n) ยังไงก็ลองนำไปใช้งานจริงดูนะครับ จะได้ใช้งานได้คล่อง ๆ