בוררי CSS משמשים ברכיב היעד, הסתר אלמנט והמתן עד שתכונות אלמנט יזהו רכיב HTML אחד או יותר. שני הסוגים העיקריים של בוררי CSS הם לבחור לפי מזהה או מחלקה. לרכיב HTML יש id אם הוא מכיל את התכונה id כפי שמוצג להלן.
<span id="myidentifier">Example Text</span>
כדי לבחור בו אתה יוצר בורר CSS כמו #myidentifier
אם לרכיב HTML יש מחלקה תהיה לו תכונת class כפי שמוצג בדוגמה זו.
<div> <span class="myclass">Example Text One</span> <span class="myclass">Example Text Two</span> <span class="myclass">Example Text Three</span> </div>
כדי לבחור בו אתה יוצר בורר CSS כמו .myclass
אם רצית לבחור אלמנט מסוים עם המחלקה של myclass אתה יכול להשתמש בבוררי CSS סטנדרטיים כדי לעשות זאת במקרה זה ילד n(2) בורר כזה: .myclass:nth-child(2) כדי לבחור את הטווח השני של myclass. עם זאת, זה יעבוד רק במקרה זה כי אין אלמנטים אחרים מתחת לאלמנט div האב. אם היה אלמנט ap למשל, זה היה משנה את אינדקס ה-nth-child.
לפעמים לרכיב HTML שאתה צריך לבחור אין מזהה או מחלקה ייחודיים בתוך דף. בעת בחירת רכיבי HTML אלו, נדרש בורר CSS מסובך יותר.
<div class="Header">
<a href="https://www.example.com/">
<div>...</div>
</a>
<div class="SearchBar">...</div>
<div class="TagLine">...</div>
</div>
לדוגמה, בדוגמה שלמעלה אנו רוצים לבחור את האלמנט DIV בתוך הקישור. לשם כך, עלינו לציין בורר CSS שפועל למטה מה-DIV הייחודי עם ה- Header מעמד.
div.Header a div
בוררי CSS הם תכונה סטנדרטית של פיתוח אתרים. מאמר זה נותן סקירה טובה של כיצד להשתמש בבוררי CSS.
אם רכיבי HTML מרובים מוחזרים מבורר CSS ואתה משתמש ברכיב היעד או ממתין לתכונות אלמנטים, רק האלמנט התואם הראשון ישמש. עם זאת, אם אתה משתמש בתכונת הסתר אלמנטים, כל רכיבי ה-HTML התואמים יוסתרו.
אם רצית להסתיר מספר אלמנטים עם מזהים או מחלקות שונות, תוכל לעשות זאת על ידי הפרדת כל בורר CSS בפסיק. אז למשל כדי להסתיר את המחלקה והמזהה לדוגמה שלמעלה, תשתמש בדברים הבאים #myidentifier,.myclass