CSS Selectors Ul Li a {...} VS Ul > Li > a {...}

CSS selectors ul li a {...} vs ul li a {...}

">" 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:

<foo> <!-- parent -->
  <bar> <!-- child of foo, descendant of foo -->
    <baz> <!-- descendant of foo -->
    </baz>
  </bar>
</foo>

for this example, foo * would match <bar> and <baz>, whereas foo > * would only match <bar>.

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 > 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 selectors inside ul li

If you grab <ul> & <li> that's good. The problem is your <i> and <span> tags are inside a <a> tag. In these cases, the <a> styling always comes before its content.

So you'll have to make somthing like this :

ul li:hover a, ul li:focus a{
  color: #0077ff;
}

CSS: select LI in multiple parent UL classes

The selector should be like this:

ul.px_p > li,
ul.px_s > li {
  ...
}

Using the > selector will only match li elements whose parent elements are ul.px_p or ul.px_s.

This is important, given that ul.px_p li will match any descendednt li element ul.px_s. This will include nested elements which the style should not apply to.

As an side note, sometimes when working in browsers, a cached version of CSS is used and changes you have made may not be reflected. Force a full refresh of the browser page which should reload the full content using CTRL+F5.

CSS selectors: (menu ul li) or (menu li)

When you say which tag is right menu ul li or menu li?, are you talking about a div with class="menu" or are you talking about the deprecated menu tag (<menu>)?

If you are just talking about your css code, those are not tags, they are selectors. And I'd go with the most specific selector available in order to avoid accidental assignments

.menu > ul > li{
    // this matches only list items directly inside a ul directly inside a .menu
}

even better would be this:

#menu > ul > li{
    // now you are referencing the menu by id, so you know this is a unique assignment
}

or, if you have multiple menus:

#menubar > .menu > ul > li{
}

because otherwise you are in for surprises, you might actually have a structure like this:
(this is ugly, I know, but just to prove a point)

<div class="menu">
    <ul>
        <li>Menu Item 1</li>
        <li>Menu Item 2</li>
        <li>Menu Item 3
        <ul>
            <li id="abc">Menu Item abc</li>
        </ul>
        </li>
        <li>Menu Item 4
        <div><div><div><ol><li><div><ul>
                <li id="xyz">Menu Item xyz</li>
        </ul></div></li></ol></div></div></div>
        </li>
    </ul>
</div>

(you probably don't want to match items abc or xyz).

Why ul li (selector) doesn't work

Ignoring the fact that your HTML is invalid as j08691 has pointed out, and assuming your inner ul is intended to be wrapped in a li element:

1. ul > li selects any li element which is a child of any ul element.
2. ul .test selects any element with a class of "test" contained within any ul element.

One and two give different results with your HTML structure because your nested ul does not contain li elements with a class of "test". Example one applies to both the outer and inner ul elements, whereas example two only affects the li elements with a class of "test" (which there are none of within your nested ul).

CSS to target last UL when there is two ULs

Use a combination of last child and second child:

ul:last-child:nth-child(2) { ... }

How to choose second and third element (li) in ul tag (with CSS)?

Chain two :nth-child() pseudoclasses to match a range of adjacent elements:

li:nth-child(n+2):nth-child(-n+3) {
  margin-right: 50px;
}

this will select both the second and the third li
acting like the logical and operator.

Codepen Demo

---

Visual result of the effect of these psuedoclasses chained:

---

Related Topics