CSS to Select All Li in Ul

CSS to select all li in ul

ul > li {
  /* css styles go here */
}

or

ul li {
  /* css styles go here */
}

the first selects only direct children the second selects all li nested within an ul.

How to select all li in an ul with a classname nav?

Constructively,

1. All ul elements:

   $("ul")
   

2. All ul elements with a classname nav:

   $("ul.nav")
   

3. All li elements under all ul elements with a classname nav:

   $("ul.nav li")
   

css - select all ul elements except ul elements that are in a div with a specific class?

got it with this:

ul:not(.jodit-wrapper ul) {
    list-style: none;
    margin: 0;
    padding: 0;
}

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.

Style all li items in ul with Tailwind CSS

You can add class space-x-6 in ul to add margin between li

jquery select all LI from UL's, that not in UL element with class

You can use :not() or not() for excluding element

$('ul:not(.not-need) li').css('color', 'red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><ul>  <li>1</li>  <li>2</li>  <li>3</li>  <li>4</li>  <li>5</li></ul>

<ul class='not-need'>  <li>1</li>  <li>2</li>  <li>3</li>  <li>4</li>  <li>5</li></ul>

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 to select top level of a ul

The reason li:not(li > ul > li) does not work is because the li > ul > li is not a simple selector (as Felix Kling noted in the comments to your question).

The easiest way to get the top level is to give a class or id to the outer most ul and then do:

.ulClassNameOrID > li {}

However, the following gets what you desire also (see fiddle) as it does not select any ul that is a direct child of a previous li (so is not a sublist of the outer list):

:not(li) > ul > li {}

---

Related Topics