מדריך CSS – הגדרות סגנון קונטקסטואליות

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

Body{background-color:white;}
a{ color:blue;}
table,h1{background-color:blue;}
table a{color:white;}
h1 i{text-transform:capitalize;}

בנוסף, בדוגמה זו שמנו אות גדולה בראש כל המילים הנמצאות בתוך תגית <i> הנמצאת בתוך תגית <h1>.
צורת כתיבה זאת שימושית במיוחד כאשר כותבים רשימות ורוצים מבנה דומה לתתי רשימות:

ol li{list-style:upper-roman;}
ol ol li{list-style:upper-alpha;}
ol ol ol li{list-style:decimal;}
ol ol ol ol li{list-style:lower-alpha;}

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

A table{display:none;}

הגדרה זו אינה מעלימה את כל הטבלאות שבדף אלא רק את אלו הנמצאות בתוך תגי <A>.

עוד הגדרה קונטקסטואלית קשורה למיקום התגית מייד אחרי אחרת:

H1 + table{magin-top:-3px;}

הגדרת סגנון זו תתייחס אך ורק לטבלה הנמצאת ישר אחרי תגית כותרת1.

הגדרת סגנון של הסימן * תתייחס לכל האלמנטים בדף הHTML.

*{font-family:times new roman;}