CSS Sprites

אז יכול להיות ששמעתם את השם פעם או פעמיים, אבל לא הבנתם מה זה אומר ואיך זה קשור לעיצוב css.

sprite זו טכניקה לייעול טעינת תמונות רקע ללחצנים וכפתורים.

לפני שנכיר את הטכניקה אנחנו צריכים להכיר את המאפיין background ב css.

 

CSS - Background

השימוש ב background לא תמיד נובע מהצורך להציג תמונה, לוגו או כותרת לאתר - הרבה פעמים נשתמש במאפייני רקע כדי להתגבר על המגבלות העיצוביות שמציב בפנינו הhtml ולהציג לחצנים ותפריטים יפים יותר.

נוכל כמובן להשתמש בתמונות כדי ליצור קישורים (נעטוף תגיות img עם תגיות a), אבל לינקים לא תמיד יספקו פיתרון לבעיות עיצוביות - ומציבים בפנינו בעיות נוספות.

השימוש במאפייני הרקע פשוט מאוד - הנה כל המאפיינים הקשורים לcss:

• background-color - קביעת צבע רקע
• background-image - קביעת תמונת רקע
• background-repeat - שכפול תמונת הרקע למילוי האלמנט
• background-attachment - התנהגות תמונת רקע
• background-position - מיקום הרקע ביחד לאלמנט

כמה מילים על כל אחד מהמאפיינים -
background-color - מגדיר כמובן את צבע הרקע של האלמנט. נוכל להגדיר צבע רקע ותמונת רקע ביחד - צבע הרקע יופיע במידה ותמונת הרקע אינה זמינה‎ וישלים את האזורים שתמונת הרקע אינה מכסה.

background-image מגדיר את תמונת הרקע של האלמנט, מאפיין זה מקבל כתובת לתמונה (כתובת מקומית או באינטרנט)

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

div {
    width: 200px;
    height: 200px;
    border: solid 1px black;
    margin: 20px auto;
    background-image: url('bg_rep.jpg');
}


#repX {
    background-repeat: repeat-x;
}

#repY {
    background-repeat: repeat-y;
}

#no-repeat {
    background-repeat:no-repeat;
}

background-attachment קובע כיצד יש להציג את תמונת הרקע - ניתן להגדיר את מיקומה של תמונת הרקע במיקום קבוע ביחס לחלון הדפדפן כך כשנגלול את החלון האלמנט המכיל את התמונה ישמש כמעין חלון לתמונה (הדרך הכי טובה להבין היא לנסות ולהשתמש במאפיין זה)

background-position קובע היכן תהיה ממוקמת התמונה ביחס לפינה השמאלית העליונה של האלמנט (מרחק x ומרחק y ביחס לאותה נקודה). - מאפיין זה הוא המפתח להבנת נושא ה sprites בהמשך ננצל את התכונה הזו כדי לייעל את העבודה עם רקעים.

כדי לעבוד עם תמונת רקע, נציין קואורדינטות - כלומר מרחק אופקי ואנכי מהנקודה השמאלית העליונה של האלמנט בעל תמונת הרקע (x ו y), למשל (עם שינוי בקוד הקודם):

#no-repeat {
    background-repeat:no-repeat;
    background-position: 40px 100px;
}

יביא לתוצאה הבאה (המידות להמחשה):

ניתן לשלב את כל מאפייני הרקע על ידי שימוש בתכונה background, בצורה הזו:

div {
    background: #D8DEED url('bg_rep.jpg') no-repeat fixed 10px 20px;
}

Sprite

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

input[type="button"] {
    background: transparent url('glossy_blue_button.png') no-repeat;
    width: 250px;
    height: 250px;
}

input[type="button"]:hover {
    background-image: url('glossy_red_button.png');
}

למדנו כבר לבנות משהו כזה - באמצעות הסלקטור המתאים ובאמצעות background-image - אבל לא למדנו מה הבעיה בשימוש בשיטה הזו.

ובכן, אם אנחנו באמת משתמשים בשתי תמונות (כפתור כחול וכפתור אדום) הדפדפן או הלקוח יוצר שתי בקשות http נפרדות. את הלחצן הכחול המשתמש יוריד לאחר טעינת הדף ואת הלחצן האדום המשתמש יוריד בעת מעבר עכבר מעל הלחצן.

ככל הנראה, בקשות http מאטות את טעינת התמונות - מה קורה כשיש לנו המון תמונות קטנות - בעת מעבר עכבר, בעת לחיצה ולעשרות קישורים ולחצנים שונים באותו הדף?

אם נשתמש בשיטה הקונבנציונאלית לשימוש בתמונות רקע, נשלם ברוחב פס ובזמן טעינה.

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

כן כן, אלה דוגמאות אמיתיות (של Apple, Amazon ו Youtube).

את השימוש ב Sprite עושים בשני שלבים:

1. משנים את הגודל של הלחצנים או האלמנטים עם תמונות הרקע
2. משחקים עם background-position כך שיוצג החלק המתאים בתמונת הרקע

נחזור לדוגמה עם שני הלחצנים - אדום וכחול - עכשיו, במקום להשתמש בשתי תמונות נשתמש בתמונה אחת (הרקע הוא שקוף ולא כהה כמו בתמונה למטה):

עכשיו נוכל להגדיר את ה css מחדש, וכל פעם לציין את הקואורדינטות המתאימות:

input[type="button"] {
    background: transparent url('all.png') no-repeat 0 0;
    width: 250px;
    height: 250px;
}

input[type="button"]:hover {
    background-position: 0 -260px;
}

הקוד למעלה יביא לנו את אותה התוצאה שקיבלנו בדוגמה הראשונה ויבצע אותה בצורה הרבה יותר יעילה ומהירה.

על ידי שימוש בטכניקת ה Sprites אנחנו יכולים לחסוך אלפי קריאות http שהיו נשלחות לשרת אלמלא היינו מורידים את כל תמונות הרקע ביחד.

הנה הדוגמה במאמר זה:

http://dl.dropbox.com/u/16278595/webmaster_files/css/sprite_hover.html

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

http://csssprites.com/
http://spritegen.website-performance.org/
http://www.spritebox.net/

CSS -Selectors - 4, Pseudo & Attribute Selectors

כמעט כיסינו את כל הסלקטורים, חוץ מהסלקטורים הכי מעניינים, הראשון שבהם הוא ה

Attribute Selector

למה להשתמש ב class ו- id כשאנחנו יכולים לבחור על פי מאפיינים קיימים?

הדוגמה הטובה ביותר היא השימוש בתגית input. גם אם אנחנו רוצים לתת את אותו עיצוב לכל הכפתורים ( buttons) באתר ועיצוב אחר, אחיד, לכל תיבות הטקסט, אנחנו עדיין צריכים להשתמש ב class כדי להבחין בין סוגי ה-input:

<!DOCTYPE html>
<html>
<head>
    <title>Selecting Specific Input Types</title>
    <style type="text/css">
        * {
            font-family: Verdana, serif;
            font-size: 12px;
        }
        input.txt {
            background-color: #EEF1E2;
            font-size: 0.9em;
        }

        input.btn {
            background-color: #ADBEDA;
            height: 30px;
        }
    </style>
</head>
<body>
    <form action="" method="post">
        <label>
            First Name: <input type="text" name="fname" class="txt"/>
        </label>
        <br/>
        <label>
            Last Name: <input type="text" name="lname" class="txt"/>
        </label>
        <br/>
        Registration Type: 
        <label><input type="radio" name="regType" value="0"/> Basic Registration</label>
        <label><input type="radio" name="regType" value="1"/> Pro Membership</label>
        <br/><br/>
        <input type="button" id="doSomething" value="Click Me!" class="btn"/>
    </form>
</body>
</html>

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

כדי לזהות תגיות לפי מאפיינים, נוכל להשתמש בסלקטור המתאים, ה- Attribute Selector: השימוש בו קל – נוסיף סוגריים מרובעות ללא רווחים (אחרת זה לא עובד) לסלקטור אחר ובהן נרשום את שם המאפיין = ערך.
הנה פיתרון אחר לאותה בעיה (בנוסף נסיר את המאפיין class מכל תגיות ה-input בקוד html):

input[type="text"] {
    background-color: #EEF1E2;
    font-size: 0.9em;
}

input[type="button"] {
    background-color: #ADBEDA;
    height: 30px;
}

נוכל להשתמש ב attribute selector כדי לבחור יותר ממאפיין אחד, הקוד הבא למשל בוחר את כל האלמנטים (כוכבית - *) המכילים את הערכים lang=he ו dir=rtl:

*[lang="he"][dir="rtl"] {/* ... */}

שני האלמנטים הראשונים (p ו h2) יבחרו על ידי הסלקטור למעלה:

<!-- Works for -->
<p lang="he" dir="rtl"></p>
<h2 dir="rtl" lang="he" class="main"></h2>

<!-- Doesn't work for -->
<p lang="he" dir="rtl"></p>
<div lang="he"></div>

אפשר לבחור אלמנטים רק על פי מאפיינים (בלי ערכים) הסלקטור הבא למשל, בוחר את כל ה spanים שנמצאים תחת p עם class=def ומגדירים את הערך title

p > span[title] {
 text-decoration: underline;
 color: #5C1212;
 font-weight: bolder;
 border-bottom: solid 2px #5C1212;
}

יש עוד כמה דברים נחמדים שתוכלו לעשות עם ה attribute selector, תוכלו לקרוא עליהם כאן.

Pseudo Classes Selectors

לא תמיד תכונות html נותנות לנו מספיק מידע על אלמנטים. מכיוון שקוד html הוא קוד סטטי ישנם מצבים מסוימים בדף שלא מיוצגים על ידו.

שאלת המפתח ליצירת סלקטור היא מה אנחנו יודעים על אלמנט מסוים?
אם נסקור לרגע את כל הסלקטורים עליהם דיברנו עד עכשיו נוכל לראות שכל אחד מהם משתמש במידע שאפשר לדלות מקוד הhtml:

• Type Selector - בוחרים אלמנט לפי הסוג שלו, כלומר, סוג התגית.
• Descendant,  First Child & Adjacent Sibling Selectors - בוחרים אלמנט לפי ה document tree, המיקום ההיררכי שלו בדף (בן של, אח של, צאצא של).
• Attributes Selectors - כולל class ו id – בוחרים אלמנט לפי מאפיין html

בכל המקרים הנ”ל אפשר לנצל את המידע הטמון בקוד html כדי ליצור את הסלקטור, במקרים אחרים לא כל כך.

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

הנה למשל שני מצבים של לינק (a) - לינק סגול מצביע לכתובת שכבר ביקרנו בה ולינק כחול מצביע לכתובת שעדיין לא ביקרנו בה.

גם אם נרצה לעצב מחדש את כל הלינקים שביקרנו בהם לא נוכל לנצל את המידע המופיע בקוד html (שונה עבור כל משתמש) כדי לייצר סלקטור מתאים ובדיוק לשם כך קיימים הפסאודו סלקטורים שהם מעין סלקטורים "חכמים" המודעים למצבים משתנים בדף.

השימוש ב Pseudo Class Selectors מאוד פשוט, בדומה לסלקטורים אחרים נוסיף : (נקודותיים) לסלקטור אחר כדי להתייחס למצב מיוחד - הנה למשל סלקטורים המתייחסים למצבים שונים של לינק (ושימושיים רק עם לינקים!), link: ו visited:

a:link {/* ... */}
a:visited {/* ... */}

/* Combined with other selectors */
a.reference:link {/* ... */}
div#content .beforeRef + a:visited{/* ... */}

link: מתייחס ללינקים שעדיין לא ביקרנו בהם ו visited: ללינקים שכבר ביקרנו.

כדאי לקרוא גם על ה - hover:, על ה active: וה focus: (לא רק ללינקים):

• focus: - עיצוב האלמנט כאשר הפוקוס עליו
• hover: - עיצוב האלמנט בעת מעבר עכבר
• active: - עיצוב האלמנט בעת לחיצת עכבר

css משאיר רק את העיצוב האחרון פעיל, ולכן חשוב לשמור על סדר הופעתם של עיצובי הפסאודו כמופיע ברשימה למעלה.

תוכלו למצוא עוד pseudo classes בדף הזה.

Pseudo Elements Selectors

השימוש במונח פסאודו (מדומה) מרמז על יצירת אובייקטים מדומים והחלת עיצוב עליהם.

אם נבחן את ה- pseudo class selector, נראה כי קיימים "מצבים" מסוימים לאלמנט (visited, link) וברגע שהמצבים האלה מתקיימים, מוסיף הדפדפן לאותם אלמנטים class מדומה בהתאם למצב.

כאן נעמוד על ההבדל בין pseudo class ל pseudo elements - פסאודו class מוסיף באופן דינאמי class מדומה לאלמנט ולעומתו  pseudo elements יוצר באופן דינאמי אלמנט חדש בהתאם לתוכן התגית ניקח לדוגמה את הקוד הבא ונשתמש באלמנט first-line: הבוחר רק את השורה הראשונה בתוכן התגית (לא עד לשבירת שורה על ידי br, אם נקטין את החלון ונשבור את השורה - ישתנה האלמנט):

<!DOCTYPE html>
<html>
<head>
    <title>Attribute Selector Example</title>
    <style type="text/css">
        p:first-line {
            font-weight: bold;
            background-color: yellow;
        }
    </style>    
</head>
<body>

<div id="main">
    <p class="def">
        This is a great example to article with special acronyms that require expansion, 
        which we can add by using the &quot;title&quot; property. |<br/>
        With XHTML and advanced CSS selectors, everything just got easier.<br/>
    </p>
</div>      
</body>
</html>

שימו לב לתוצאה כשמשנים את גודל החלון:

בזמן ההצגה, הדפדפן יוצר מעין אלמנט מדומה - נקרא לו firstline ובהתאם לרזולוציה וגודל החלון משנה את מיקומו - הנה מה שקורה (כביכול) מאחורי הקלעים בדוגמאות למעלה:

<!-- First Example -->
<p class="def">
    <firstline>This is a great example to article with</firstline> 
    special acronyms that require expansion, 
    which we can add by using the &quot;title&quot; property. |<br/>
    With XHTML and advanced CSS selectors, everything just got easier.<br/>
</p>

<!-- Second Example -->
<p class="def">
    <firstline>This is a great example to article with special acronyms </firstline> 
    that require expansion, which we can add by using the &quot;title&quot; property. |<br/>
    With XHTML and advanced CSS selectors, everything just got easier.<br/>
</p>

בכל פעם ששבירת השורה משתנה, משנה הדפדפן את המיקום של אותו אלמנט פסאודו.

תוכלו לקרוא עוד על Pseudo Elements כאן.

רמת ספציפיות של סלקטור

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

תקן css מכיל שיטת חישוב ספציפיות של סלקטור על פי נוסחא פשוטה ( ישנם ארבעה גורמים עיקריים המשפיעים על שיטת החישוב: style, id, attributes, types - לכל אחד מהם משקל שונה - רמת חוזק הסלקטור = שכלול מספר הופעתם של כל אחד מהגורמים ומשקלם ).

תוכלו לקרוא עוד על חוזק הסלקטורים בדף הבא:
http://www.w3.org/TR/CSS2/cascade.html#specificity

CSS -Selectors - 3, ID & Class Selectors

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

לעיתים קרובות נרצה להחיל עיצוב על אוסף "שרירותי" של תגיות, כלומר, על אוסף תגיות שאין ביניהן יחסי היררכייה קבועים.

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

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

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

בוודאי שלא קיים סלקטור שיכול לנחש איזו תגית מכילה הערת שגיאה ואיזו לא - ולכן נוכל "לסמן" תגיות מסוימות ובכך לשייך אותן לאותה קבוצה (הודעות שגיאה / אזהרה).

כמו שקיים מאפיין style לכל התגיות המופיעות בbody, קיים מאפיין נוסף בשם class שתפקידו היחיד הוא סימון אותן תגיות, הערך אותו מקבל המאפיין הוא טקסטואלי, כל שם באנגלית שתרצו (מלבד מילות המפתח).

כל תגית יכולה לקבל ערך class אחד או יותר (או בכלל לא):

<!-- Both Tags can now be easily selected with the CSS Class Selector -->

<h1 class="blogTitle">This Tag Belongs to the "blogTitle" class</h1>
<div class="blogTitle">This div also belongs to the "blogTitle" class</div>

הנה קוד ה-html בדוגמה למעלה עם שימוש ב class:

<p class="errorNote">
 <strong>Error:</strong><br/>
 We couldn't process your transaction, probably because you have no items in your cart.<br/>
 Please make that there are items in cart before checking out.
</p>


<div class="errorNote">
 <strong>Please check the following:</strong>
 <ul>
  <li>Username must contain at least 4 letters</li>
  <li>Password confirmation is not identical to previous password</li>
  <li>You must insert email address</li>
 </ul>
</div>

<h3 class="errorNote">Please note that you are not logged in</h3>

עכשיו לאחר שסימנו את כל התגיות המכילות הודעת שגיאה, נוכל להשתמש ב class selector כדי להחיל עליהן עיצוב:

.errorNote {
    background-color: #FECBCC;
    border: solid 1px black;
}

/* Is Identical To: */

*.errorNote {
   background-color: #FECBCC;
   border: solid 1px black:
}

נוסיף נקודה ולאחריה את שם המחלקה (הערך אותו הכנסנו למאפיין class) וכך נבחר את התגיות המתאימות.

נוכל אפילו להיות יותר ספציפיים עבור תגיות מסוימות, למשל, כדי לבחור את כל הרשימות שהן גם errorNote, נשתמש ב class selector בצורה הבאה:

ul.errorNote {
    list-style-type: square;
}

וכמובן לא נשכח שגם את ה class selector אפשר לשלב עם כל הסלקטורים שראינו עד עכשיו:

div > div .errorNote, p+.errorNote {
 background-color: #800003;
 color: white;
}

כמו שכבר ציינו, נוכל לתת לתגית אחת יותר מ class אחד:

<div class="main content thick">
 I have 3 classes!
</div>

כל אחד מהסלקטורים הבאים ישפיע על אותו div:

.main { /* ... */ }
.content { /* ... */ }
.thick { /* ... */ }

נוכל אפילו להגדיר עיצוב מיוחד לתגיות המשתייכות למספר מחלקות:

.leftBorder.rightBorder.infoBox { /* ... */ }

הסלקטור הזה למשל יחול אך ורק על התגית p בקוד למטה:

<p class="leftBorder rightBorder infoBox highlight"> ... </p>
<div class="leftBorder highlight"></div>
<table class="rightBorder infoBox"></table>

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

הקוד הבא, למשל, לא חוקי מאחר ויותר מתגית אחת מקבלת את הערך id=main:

<div id="main"></div>
<p id="main"></p>
<div id="main" class="special"></div>

כדי לבחור בתגית בעלת id מסוים נשתמש בסולמית - # ואחריה הערך המזהה,
קוד html:

<div id="mainContent">
 ...
</div>

סלקטור מתאים:

#mainContent { /* ... */ }

/* Identical To: */

div#mainContent { /* ... */ }

קיימים עוד שלושה סוגי סלקטורים - ה- attribute selector, ה- pseudo class selectors וה- pseudo elements selectors, עליהם נדבר בהרחבה בפוסט הבא.

CSS - Selectors - 2, Child & Adjacent Sibling Selectors

בפוסט הקודם דיברנו על סלקטורים ועל סלקטור הצאצאים ( Descendant Selector ), בהמשך נכיר סלקטורים נוספים ונראה בכל שלב איך אפשר לשלב מספר סוגי סלקטורים ליצירת סלקטור מורכב:

Child Selector

סלקטור ילדים דומה מאוד לסלקטור צאצאים מלבד העובדה שהוא מוגבל אך ורק לילדים (מדור ראשון).

הנה תזכורת קצרה למבנה "המשפחתי" של תגיות xhtml:

<ul>
 <li><span>Another</span></li>
 <li><span>Example</span></li>
 <li><span>Of</span></li>
 <li><span>HTML Relations</span></li>
</ul>

התגית span היא הבת של li והנכדה של ul. 

תגיות ה li הן אחיות ובנות ל ul

התגית ul נחשבת לאביהן של li ואב-קדמון ל span.

אנחנו משתמשים ב- Child Selector כאשר אנחנו רוצים להבדיל בין רמות שונות של אותה תגית, למה הכוונה?
בדוגמה הבאה אנו מתייחסים לתגית strong בכמה צורות. כאשר התגית מופיעה בתוך פיסקה, נרצה לצבוע אותה בצבע רקע צהוב (להדגשה) וכאשר היא מופיעה בתוך אלמנט אחר, לא נקבע לה עיצוב (strong בתוך רשימה פשוט מדגישה את הטקסט (bold). הנה התוצאה הרצויה:

<p>
    The following paragraph demonstrates the power of CSS selectors.<br/>
    The following text, for example, <strong>should be marked</strong> using <br/>
    the &lt;strong&gt; tag.
    <ul>
     <li>However, when inserted</li>
     <li>into a list</li>
     <li>the &lt;strong&gt; tag</li>
     <li>should use his <strong>default behaviour</strong></li>
    </ul>
</p>

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

p strong {
    background-color: yellow;
}

p ul strong {
    background-color: transparent;
}

נו אז מה רע בפיתרון הזה?

הפיתרון הזה עובד. בדוגמה הזו, כשיש לנו רק ul, מה קורה כשאנחנו רוצים להכניס strong לתוך רשימת הגדרות שנמצאת בתוך פיסקה? או אולי לתוך טופס או ל ol או לכל תגית אחרת שאפשר להכניס לפסקה? נוסיף הגדרה לכל אחת מהן?

אז אולי בכל זאת יש פתרון, הנה:

p strong {
 background-color: yellow;
}

p * strong {
 background-color: transparent;
}

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

זה ממש כמו לצבוע את כל הבית באפור ואז שוב לצבוע את חדר השינה בלבן כשבסך הכל יכלנו להגיע לאותה תוצאה בפחות זמן וביתר קלות.
הנה שימוש ב Child Selector זהה:

p > strong {
 background-color: yellow;
}

כדי להשתמש בסלקטור הילדים, נוסיף סימן > בין תגית האב לתגית הבן, כאשר ה"חץ" פונה לכיוון הבן.
שימו לב, על ידי הגדרת סלקטור אחד, ספציפי יותר, פתרנו את הבעיה.
שוב, נזכיר שבכל שלב, אפשר לשלב את כל הסלקטורים שראינו עד כה (תרגיל):

div > table td > span, p li > a {
 background-color: green;
}

Adjacent Sibling Selector

לא תאמינו, אבל נוכל להגדיר סלקטורים אפילו יותר מתוחכמים ממה שראינו עד עכשיו.

הנה למשל סלקטור אחים סמוכים, שבאמצעותו נוכל לבחור תגית שמגיעה מיד אחרי תגית אחרת (אחות).

כמובן, כמו תמיד, הדרך הכי טובה לזכור היא על ידי דוגמה.
יהא בלוג (ברוח ההוכחות של חדו"א), המורכב מכותרות h1 ומפסקאות, p (תקצירי מאמרים) הבנוי בצורה הזו:

קוד:

<h3>This Title Has Nothing To Do With The Blog Posts</h2>
<p>
 This paragraph also has nothing to do with the blog posts....
</p>

<h1>This Is A Blog Post Title</h1>
<p>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<h1>This Is Another Blog Post Title</h1>
<p>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<strong>And so on.. </strong>

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

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

דרך אחת (עוקפת) לעשות זאת היא "לעטוף" את הפוסטים והכותרות ב div ולהשתמש בסלקטורים שראינו עד כה, סלקטור צאצאים וסלקטור בנים - אך לשם כך ניאלץ לשכתב את קוד ה html. 

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

h1+p {
    background-color: #EDECE4;
}

כדי להשתמש בסלקטור, נוסיף סימן + בין הסלקטורים הסמוכים - העיצוב כמובן יתייחס לתגית מצדו הימני של סימן הפלוס. בדוגמה למעלה: כל תגיות ה-p המופיעות מיד לאחר התגית h1.
העיצוב הנ"ל לא יעבוד על הקוד הבא (התגית p לא מופיעה מיד לאחר התגית h1): 

<h1>This Is A Blog Post Title</h1>
<span> Tags: code, html, blog </span>
<p>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

כן, נכון, ישנם עוד סלקטורים.. בפוסט הבא.