7 באוק׳ 2012

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;
}

image


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

Pseudo Classes Selectors

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

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

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

הנה למשל שני מצבים של לינק (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>

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

image


image



בזמן ההצגה, הדפדפן יוצר מעין אלמנט מדומה - נקרא לו 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

פורסם על ידי ב-
תוויות: , , , , ,

אין תגובות:

הוסף רשומת תגובה

הירשם ל- תגובות לפרסום (Atom)