How properly I refer to a
in the CSS should I use e.g. ul > li or just ul li

Question

I've learned that if I'm refering to a <li> within <ul> or <ol> in CSS i should use ol > li or ul > li but once i forgot put the sign between ol and li and I've found that is working anyway. What is the proper way to do this?

https://stackoverflow.com/questions/4459821/css-selector-what-is-it — Michael Coker, Jun 17 '17 at 19:04
Possible duplicate of [What does the ">" (greater-than sign) CSS selector mean?](https://stackoverflow.com/questions/3225891/what-does-the-greater-than-sign-css-selector-mean) — jonrsharpe, Jun 17 '17 at 19:05

score 2 · Answer 1 · answered Jun 17 '17 at 19:07

2

Yes it works, because it "Selects all direct child elements specified by “child” of elements specified by “parent”"

like

<ul>
<li></li>
</ul>

but not
<ul>
<li>
   <ol>
      <li></li>
   </ol>
</li>
</ul>

when you use ul > li selector, it will get only one direct child li element on ex.2, if used ul li then you will get tow li elements - all child li elements of ul

answered Jun 17 '17 at 19:07

lasha maraneli

87
7

So in 2nd example: It will get only one
element or all
elements that are childs of
- from
  - from

Luke_Nuke

Jun 17 '17 at 19:14

ul > li means direct child element, so in ex.2 it will get direct li element. ul li withoud > sighn means all ull children elements through all hierarchy and it will get 2 li elements, yes, selond is ol-s direct child but it-s ul-s indirect child but child – lasha maraneli Jun 17 '17 at 19:28

derHugo · Accepted Answer · 2017-06-17T19:37:21.640

2

They are not equivalent! Imagine a structure like

<ul>
  <li id="A"> </li>
  <li id="B">
     <ol>
        <li id="C"> </li>
      </ol>
   </li>
</ul>

than ul li means ALL <li> in this example A,B and C while ul > li only means the direct childs of the <ul> so A and B but not C

edited Jun 17 '17 at 19:37

answered Jun 17 '17 at 19:09

derHugo

83,094
9
75
115

Ok so if I understand correctly in your example: ul li will get ALL
within
- from
  1. wont be affected by the changes made in code like: ul > li {font-size: 10px;}

Luke_Nuke

Jun 17 '17 at 19:17

Exactly that's why it's called CASCADE style script ;) – derHugo Jun 17 '17 at 19:18

You're incorrect. `ul > li` will apply styling to each and every list item. all list items **must** be a child of a `

` or `

` – j08691 Jun 17 '17 at 19:21

yes but > is used for DIRECT childs at least that's what I learned – derHugo Jun 17 '17 at 19:23

There is no such thing as a "direct child". Something is either a child or not. There's a difference between a child and a descendant however. You are a child of your mother and father but you're not a child of your grandparents. However you are a descendant of all of them. – j08691 Jun 17 '17 at 19:24

https://www.w3schools.com/cssref/css_selectors.asp `element element div p Selects all

elements inside

elements 1 element>element div > p Selects all

elements where the parent is a

element` There is a diferent between "beeing inside of a div" and "having a div as parent"

– derHugo Jun 17 '17 at 19:34

Anyway I think the OP undesrtood quite well what I mean by "direct" child .. sorry for that word than but it was the easiest way to make me understood ;) – derHugo Jun 17 '17 at 19:43

score 0 · Answer 3 · answered Jun 17 '17 at 19:02

They're effectively equivalent since an <li> must be a child of either a <ol> or <ul>.

The child selector combinator, >, just means that the element on the right side of the rule in x > y must be a child (not just a descendant) of the element on the left. Since with lists this must be the case, your rules are equivalent and either is fine to use. Note that in terms of CSS specificity, that the combinator has no effect.

score 0 · Answer 4 · answered Jun 17 '17 at 19:07

0

When you use ul li it will take any li inside an ul... That means that if you have, per example this HTML:

<ul>
  <li>one</li>
  <li>
    <ol>
      <li>one again</li>
    </ol>
  </li>
</ul>

it will be applied to both li inside the ul and the ol.

BUT, if you use ul > li it will be applied only to the first li in the example, because it is a direct child of ul.

answered Jun 17 '17 at 19:07

Eduardo Sganzerla

931
8
9

You're also inserting a `
– j08691 Jun 17 '17 at 19:23
Thank you guys it is clear for me now! :) I would accept both your answers but i can select only one :) Thank you all! – Luke_Nuke Jun 17 '17 at 19:24
@j08691 So if I use ul li and within
– Luke_Nuke Jun 17 '17 at 19:28
@Luke_Nuke You can test this pretty easily. Adding an class would make your rules more restrictive because they wouldn't be applied to lists that don't have the class – j08691 Jun 17 '17 at 19:31

How properly I refer to a in the CSS should I use e.g. ul > li or just ul li

4 Answers4

How properly I refer to a
in the CSS should I use e.g. ul > li or just ul li