עד כה, הכרנו את הסלקטורים הבסיסיים - סלקטור של סוג אלמנט, סלקטור של class וסלקטור של id.
יש סוג נוסף של סלקטורים, והם סלקטורים תלויי מצב. בשונה מסלקטורים רגילים, העיצוב שהם מגדירים מופעל רק בתנאים מסויימים, כתלות במצב האלמנט - ביחס לדף או ביחס לאלמנטים אחרים.
סלקטורים כאלו נקראים פסאודו-סלקטורים (Pseudo selectors).

בואו נתחיל בדף HTML פשוט, אשר מגדיר טבלה ורשימה:

<body>
    <h1>Pseudo selectors</h1>

    <table>
        <tr>
            <td>Bugs</td>
            <td>Bunny</td>
        </tr>
        <tr>
            <td>Daffy</td>
            <td>Duck</td>
        </tr>
        <tr>
            <td>Porky</td>
            <td>Pig</td>
        </tr>
        <tr>
            <td>Elmer</td>
            <td>Fudd</td>
        </tr>
    </table>

    <ul>
        <li>Rabbit</li>
        <li>Duck</li>
        <li>Pig</li>
        <li>Hunter</li>
    </ul>
</body>

פסאודו סלקטור של first-child

אם היינו רוצים להחיל עיצוב כלשהו על כל שורות הטבלה, יכולנו להשתמש בסלקטור של סוג אלמנט, למשל כך:

table, ul
{
    color: green;
}

אבל לפעמים, אנו רוצים להחיל עיצוב שונה רק על האלמנט הראשון, בדוגמה שלנו - השורה הראשונה בטבלה והפריט הראשון ברשימה. לצורך כך אפשר להשתמש בפסאודו סלקטור של first-child:

table, ul
{
    color: green;
}

tr:first-child, li:first-child
{
   color: blueviolet;
}

css-peudo-selectors1

שימו לב שהפעלנו את הפסאודו סלקטור על האלמנטים הפנימיים, כלומר tr עבור הטבלה ו- li עבור הרשימה, ולא על האלמנטים של table ו- ul עצמם.

אפשר לטעון שיכולנו להשיג את אותו אפקט על ידי שימוש בסלקטור רגיל, למשל לשייך את השורה הראשונה ל- class כלשהו, אך לא לשייך אליו את שאר שורות הטבלה. זה נכון, אבל על ידי שימוש בפסאודו סלקטור החלנו את העיצוב על כל הטבלאות בדף.

פסאודו סלקטור של last-child

באופן דומה, אפשר להחיל עיצוב על האלמנט האחרון, דהיינו השורה האחרונה בטבלה או הפריט האחרון ברשימה. לצורך כך, נשתמש בפסאודו-סלקטור last-child:

table, ul
{
    color: green;
}

tr:last-child, li:last-child
{
   color: blueviolet;
}

css-peudo-selectors2

ובאמת אנחנו רואים שהעיצוב הוחל על הפריט האחרון בלבד.

פסאודו סלקטור של nth-child

אבל מה אם אנחנו רוצים להחיל את העיצוב לאו דווקא על האלמנט הראשון או האחרון? במקרה כזה, נשתמש בפסאודו סלקטור של nth-child. זה מאפשר להגדיר את האלמנט עליו יוחל העיצוב. בואו, לשם ההמחשה, נחיל את העיצוב על השורה השלישית בטבלה ועל השורה השנייה ברשימה:

table, ul
{
    color: green;
}

tr:nth-child(3), li:nth-child(2)
{
   color: blueviolet;
}

css-peudo-selectors3

שימו לב שהפסאודו סלקטור הזה מקבל פרמטר בסוגריים - הפרמטר הזה קובע מיהו האלמנט עליו יוחל העיצוב. שימו לב שהאינדקס של האלמנט הראשון הוא 1. זה מעט מבלבל, כי בג’אווהסקריפט (ולמעשה, ברוב שפות התכנות), מתחילים לספור מ- 0. אבל בסלקטורים של CSS, מתחילים לספור מ- 1.