CSS selectors ul li a vs ul li a

Question

What is the difference between ul  gt  li  gt  a       and ul li a       in CSS  Which one is more efficient and why

User · Answer

ul gt li selects all li that are a direct child of ul whereas ul li selects all li that are anywhere within  descending as deep as you like  a ul  For HTML    lt ul gt     lt li gt  lt span gt  lt a href     gt Something lt  a gt  lt  span gt  lt  li gt     lt li gt  lt a href     gt or Other lt  a gt  lt  li gt   lt  ul gt    And CSS   li a  color  green    li gt a  color  red      The colour of Something will remain green but or Other will be red  Part 2  you should write the rule to be appropriate to the situation  I think the speed difference would be incredibly small  and probably overshadowed by the extra characters involved in writing more code  and definitely overshadowed by the time taken by the developer to think about it   However  as a rule of thumb  the more specific you are with your rules  the faster the CSS engines can locate the DOM elements you want to apply it to  so I expect li gt a is faster than li a as the DOM search can be cut short earlier  It also means that nested anchors are not styled with that rule  is that what you want   lt    much more pertinent question

User · Answer

to answer to your second question - performance IS affected - if you are using those selectors with a single  no nested  ul    lt ul gt       lt li gt jjj lt  li gt       lt li gt jjj lt  li gt           lt li gt jjj lt  li gt   lt  ul gt    the child selector ul  gt  li is more performant than ul li because it is more specific  the browser traverse the dom  right to left   so when it finds a li it then looks for a any ul as a parent in the case of a child selector  while it has to traverse the whole dom tree to find any ul ancestors in case of the descendant selector

User · Answer

1  for example HTML code    lt ul gt       lt li gt           lt a href     gt firstlink lt  a gt           lt span gt  lt a href     gt second link amp lt  a gt       lt  li gt   lt  ul gt    and css rules   1  ul li a  color red    2  ul  gt  li  gt  a  color blue         - symbol mean that that will be searching only child selector  parentTag   childTag   so first css rule will apply to all links  first and second  and second rule will apply anly to first link  2  As for efficiency - I think second will be more fast - as in case with JavaScript selectors  This rule read from right to left  this mean that when rule will parse by browser  it get all links on page   - in first case it will find all parent elements for each link on page and filter all links where exist parent  tags  ul  and  li  - in second case it will check only parent node of link if it is   li  tag then -  check if parent tag of  li  is  ul    some thing like this  Hope I describe all properly for you

User · Answer

ul  gt  li  gt  a selects only the direct children  In this case only the first level  lt a gt  of the first level  lt li gt  inside the  lt ul gt  will be selected   ul li a on the other hand will select ALL  lt a gt -s in ALL  lt li gt -s in the unordered list  Example of ul  gt  li   x000D   x000D  ul  gt  li bg   x000D    background  red  x000D    x000D   lt ul gt  x000D     lt li class  bg  gt affected lt  li gt  x000D     lt li class  bg  gt affected lt  li gt      x000D     lt li gt  x000D       lt ol gt  x000D         lt li class  bg  gt NOT affected lt  li gt  x000D         lt li class  bg  gt NOT affected lt  li gt  x000D       lt  ol gt  x000D     lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    if you d be using ul li - ALL of the li-s would be affected  UPDATE The order of more to less efficient CSS selectors goes thus    ID  e g  header Class  e g   promo  Type  e g  div Adjacent sibling  e g  h2   p Child  e g  li  gt  ul Descendant  e g  ul a Universal  i e    Attribute  e g   type  text   Pseudo-classes -elements  e g  a hover   So your better bet is to use the children selector instead of just descendant  However the difference on a regular page  without tens of thousands elements to go through  might be absolutely negligible

User · Answer

Here  gt  a to specifiy the color for root of li active menu-item   primary-menu   li active menu-item   a   x000D   x000D   primary-menu gt li active menu-item gt a   x000D    color   c19b66  x000D    x000D   lt ul id  primary-menu  gt  x000D     lt li class  active menu-item  gt  lt a gt Coffee lt  a gt  x000D       lt ul id  sub-menu  gt  x000D         lt li class  active menu-item  gt  lt a gt aaa lt  a gt  lt  li gt  x000D         lt li class  menu-item  gt  lt a gt bbb lt  a gt  lt  li gt  x000D         lt li class  menu-item  gt  lt a gt ccc lt  a gt  lt  li gt  x000D       lt  ul gt  x000D     lt  li gt  x000D   x000D     lt li class  menu-item  gt  lt a gt Tea lt  a gt  lt  li gt  x000D     lt li class  menu-item  gt  lt a gt Coca Cola lt  a gt  lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

gt   is the child selector     is the descendant selector  The difference is that a descendant can be a child of the element  or a child of a child of the element or a child of a child of a child ad inifinitum   A child element is simply one that is directly contained within the parent element    lt foo gt   lt  -- parent -- gt     lt bar gt   lt  -- child of foo  descendant of foo -- gt       lt baz gt   lt  -- descendant of foo -- gt       lt  baz gt     lt  bar gt   lt  foo gt    for this example  foo   would match  lt bar gt  and  lt baz gt   whereas foo  gt    would only match  lt bar gt    As for your second question      Which one is more efficient and why    I m not actually going to answer this question as it s completely irrelevant to development  CSS rendering engines are so fast that there is almost never  a reason to optimize CSS selectors beyond making them as short as possible   Instead of worrying about micro-optimizations  focus on writing selectors that make sense for the case at hand  I often use  gt  selectors when styling nested lists  because it s important to distinguish which level of the list is being styled     if it genuinely is an issue in rendering the page  you ve probably got too many elements on the page  or too much CSS  Then you ll have to run some tests to see what the actual issue is

[css] CSS selectors ul li a {...} vs ul > li > a {...}

Examples related to css

Examples related to css-selectors