CSS

סלקטורים (Selectors)

מהו סלקטור?

סלקטור הוא הדרך לבחור אילו אלמנטי HTML יקבלו את העיצוב.

סלקטור {
    תכונה: ערך;
}

סלקטורים בסיסיים

1. סלקטור אלמנט (Element Selector)

בוחר את כל האלמנטים מסוג מסוים:

/* כל הפסקאות */
p {
    color: blue;
}

/* כל הכותרות מסוג h1 */
h1 {
    font-size: 32px;
}

2. סלקטור מחלקה (Class Selector)

בוחר אלמנטים לפי שם מחלקה (מתחיל בנקודה):

<p class="highlight">טקסט מודגש</p>
<p class="highlight important">טקסט חשוב</p>

/* כל האלמנטים עם class="highlight" */
.highlight {
    background-color: yellow;
}

/* אלמנט עם שתי מחלקות */
.highlight.important {
    font-weight: bold;
}

3. סלקטור מזהה (ID Selector)

בוחר אלמנט לפי ID ייחודי (מתחיל בסולמית):

<div id="header">כותרת</div>

/* אלמנט עם id="header" */
#header {
    background-color: navy;
    color: white;
}

⚠️ חשוב: ID צריך להיות ייחודי - רק אלמנט אחד עם אותו ID בדף!

4. סלקטור אוניברסלי (Universal Selector)

בוחר את כל האלמנטים:

/* כל האלמנטים בדף */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

סלקטורים משולבים

רשימת סלקטורים (Grouping)

אותו עיצוב למספר סלקטורים:

/* במקום לכתוב שלוש פעמים */
h1 {
    color: blue;
}
h2 {
    color: blue;
}
h3 {
    color: blue;
}

/* אפשר לקצר */
h1, h2, h3 {
    color: blue;
}

סלקטור צאצא (Descendant)

רווח בין סלקטורים:

/* כל ה-p שבתוך div (בכל רמת עומק) */
div p {
    color: green;
}

<div>
    <p>ירוק</p>           <!-- נבחר -->
    <section>
        <p>גם ירוק</p>     <!-- נבחר -->
    </section>
</div>
<p>לא ירוק</p>            <!-- לא נבחר -->

סלקטור ילד ישיר (Child)

סימן גדול מ-:

/* רק p שהם ילדים ישירים של div */
div > p {
    color: red;
}

<div>
    <p>אדום</p>           <!-- נבחר -->
    <section>
        <p>לא אדום</p>    <!-- לא נבחר -->
    </section>
</div>

סלקטור אח סמוך (Adjacent Sibling)

סימן פלוס:

/* p שמגיע מיד אחרי h1 */
h1 + p {
    font-size: 18px;
}

סלקטור אחים כלליים (General Sibling)

סימן טילדה:

/* כל ה-p שמגיעים אחרי h1 (באותה רמה) */
h1 ~ p {
    color: gray;
}

סלקטורי תכונה (Attribute Selectors)

בסיסי

/* כל האלמנטים עם התכונה title */
[title] {
    border-bottom: 1px dotted;
}

/* כל האלמנטים עם type="text" */
[type="text"] {
    border: 1px solid gray;
}

התאמות מתקדמות

/* מתחיל ב- */
[href^="https"] {
    color: green;
}

/* מסתיים ב- */
[href$=".pdf"] {
    color: red;
}

/* מכיל */
[class*="btn"] {
    padding: 10px;
}

Pseudo-classes

מצבים מיוחדים של אלמנטים:

מצבי עכבר

/* כשהעכבר מעל */
a:hover {
    color: red;
}

/* כשלוחצים */
button:active {
    background-color: darkblue;
}

/* כשהאלמנט בפוקוס */
input:focus {
    border-color: blue;
    outline: none;
}

מצב קישורים

/* קישור שלא ביקרו בו */
a:link {
    color: blue;
}

/* קישור שביקרו בו */
a:visited {
    color: purple;
}

מיקום ברשימה

/* ילד ראשון */
li:first-child {
    font-weight: bold;
}

/* ילד אחרון */
li:last-child {
    border-bottom: none;
}

/* ילד לפי מספר */
li:nth-child(2) {
    color: red;
}

/* ילדים זוגיים/אי-זוגיים */
tr:nth-child(even) {
    background-color: #f2f2f2;
}

tr:nth-child(odd) {
    background-color: white;
}

/* כל שלישי */
li:nth-child(3n) {
    color: blue;
}

מצבי טפסים

/* שדה מושבת */
input:disabled {
    background-color: #eee;
}

/* שדה נדרש */
input:required {
    border-left: 3px solid red;
}

/* checkbox מסומן */
input:checked + label {
    font-weight: bold;
}

:not() - שלילה

/* כל ה-p חוץ מאלה עם class="special" */
p:not(.special) {
    color: gray;
}

Pseudo-elements

חלקים וירטואליים של אלמנטים:

/* לפני האלמנט */
.quote::before {
    content: '"';
    font-size: 2em;
    color: gray;
}

/* אחרי האלמנט */
.quote::after {
    content: '"';
    font-size: 2em;
    color: gray;
}

/* האות הראשונה */
p::first-letter {
    font-size: 2em;
    font-weight: bold;
}

/* השורה הראשונה */
p::first-line {
    font-style: italic;
}

/* טקסט מסומן */
::selection {
    background-color: yellow;
    color: black;
}

📝 הערה: pseudo-elements משתמשים בשני נקודותיים (::) לעומת pseudo-classes שמשתמשים באחד (:)

Specificity (עדיפות)

כשיש התנגשות בין כללים, מי מנצח?

סדר העדיפות (מהנמוך לגבוה)

1. Element - p, div, h1 (משקל: 0,0,0,1)
2. Class / Pseudo-class / Attribute - .class, :hover, [type] (משקל: 0,0,1,0)
3. ID - #id (משקל: 0,1,0,0)
4. Inline style - style="" (משקל: 1,0,0,0)
5. !important - גובר על הכל (הימנעו משימוש!)

חישוב דוגמה

/* Specificity: 0,0,0,1 */
p {
    color: black;
}

/* Specificity: 0,0,1,0 */
.text {
    color: blue;
}

/* Specificity: 0,0,1,1 */
p.text {
    color: green;
}

/* Specificity: 0,1,0,0 */
#content {
    color: red;
}

/* Specificity: 0,1,1,1 */
#content p.text {
    color: purple; /* מנצח! */
}

טבלת השוואה

⚠️ טיפ: הימנעו משימוש ב-!important. אם צריכים אותו - כנראה יש בעיה במבנה הסלקטורים.

סיכום

הבא: צבעים ורקעים ➡️