css משמעות הסלקטור > וההבדל בינו לבין שרשור רגיל

ב css ישנו סלקטור שנראה כך > ונקרא סלקטור הילד

התווסף ב  css2 , אנחנו יכולים להשתמש בסלקטור הילד לבחור אלמנט שיש לו בדיוק את הילדים שמצויינים בסלקטור

אין חילחול פנימה כמו בסלקטור נקודה (.)

דוגמאות

<div>
  <p><b>test 1</b></p>
  <p><b>test 2</b></p>
  <b>test 3</b>
</div>

 

אם נשתמש ב css הזה 
כל הטקסטים יצבעו באדום 
div b { color: red; } 

אם נשתמש בזה 
רק הטקסט השלישי יצבע באדום

div>b { color: red; }

למה זה טוב?

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

 

 

<ul>

<li>
    <a>כותרת</a>
 <ul>
     <li>פריט 1</li>
     <li>פריט 2</li>
    <li>פריט 2</li>
 </ul>
</li>


</ul>

 

יבחר רק את הכותרת

ul > li > a {

 

יבחר גם את הפריטים + הכותרת

ul li a {

 

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