@zvinissim קשה להעלות מדריך על זה כי זה נושא שלם שצריך להקדיש קצת זמן ללמוד את זה מסודר.
אבל לעצם הבעיה, הפתרון לחלק הזה הוא פשוט להוריד חלק מהקוד שמיותר:
[component="topic/teaser"] {
display: none
}
פטור בלא כלום אי אפשר, אז הקדמה קצרה לנושא של CSS:
קובץ CSS מורכב מ"כללים" כל כלל מורכב משני חלקים: ה-selector דהיינו החלק שלפני המסולסלים, חלק זה מגדיר על איזה אלמנטים העיצוב יחול, וה-body של הכלל שזה החלק בתוך המסולסלים ששם מכניסים את העיצוב הרצוי
לצורכך, אתה צריך בעיקר ללמוד על selector-ים, כי להבנתי אתה לא רוצה עיצובים מסובכים אלא בעיקר להסתיר תוכן עם display: none
סוגי selector-ים
לגבי selector-ים יש כמה סוגים. כל סוג בוחר אלמנטים לפי פרמטר אחר:
- לפי סוג אלמנט, למשל לבחור כל האלמנטים שהם מסוג
h1
פשוט כותביםh1
- לפי ה-class של האלמנט, סלקטורים אלו כתובים עם נקודה בהתחלה, לדוגמה להחיל עיצוב על אלמנט עם ה-class של
c1
כותבים בסלקטור:.c1
- לפי id של אלמנט, סלקטורים אלו כותבים עם סולמית בהתחלה, לדוגמה לבחור אלמנט עם ה-id של id1 כותבים:
#id1
- לפי כל מאפיין אחר של האלמנט, (מאפיינים = attributes - הם השדות בצורה של
attr="val"
שאפשר להוסיף לאלמנט) סלקטור כזו כותבים בתוך סוגריים מרובעות. לדוגמה:[component="category/post"]
בוחר כל אלמנט שבו המאפייןcomponent
יש לו את הערך"category/post"
חיבור selector-ים
אפשר לחבר ביחד כמה סלקטורים לקבל תוצאה רחבה או צרה יותר
-
חיבור עם פסיק: מרחיב את הבחירה לכל האלמנטים שמתאימים לשום אחד מהסלקטורים ברשימה. למשל:
h1, .xyz
יתן לך גם כל האלמנטים מסוגh1
וגם אותם שיש להם קלאסxyz
-
חיבור עם רווח: מצר את הבחירה לאלמנט שיש לו ב"ייחוס" שלו כל הסלקטורים שברשימה לפי הסדר, למשל:
h1 .xyz .abc
בוחר כל אלמנט שהוא עצמו יש לו קלאס שלabc
והוא צאצא של אלמנט עם קלאסxyz
ושה-xyz הזה הוא צאצא שלh1
-
חיבור בלי רווח או פסיק: מחייב שכל התנאים יתקיימו באלמנט אחד. למשל:
h1.xyz.abc
בוחר רק אלמנט שהוא גם קלאסabc
וגם קלאסxyz
וגם שהוא מסוגh1
זה ממש ממש על קצה המזלג...