Using the selector to style navigation created by unordered lists

Question

Below are the following HTML / CSS code examples:

ul {
  display: inline-block;
  list-style: none;
}
li {
  color: #000;
}

<ul>
  <li>Home</li>
  <li>Portfolio</li>
</ul>

Run codeHide result

• When choosing the format and style of a navigation menu that was created using an unordered list, what is the difference in using the ul switch to target lists or targeting a personal switch?
• Is there a suitable time when I should use only the ul selector instead of li and vice versa? In other words, are there properties that work only at the ul level. And at the level?

Answer 1

, , , ul ( CSS, ):

li { color: blue; }
li:first-child, li:last-child { color: red }

.. : .

- . :

<ul>
  <li class="my-superior-class-name"
  <li class="my-superior-class-name">A</li>
  <li class="my-superior-class-name">A</li>
  <li class="my-superior-class-name">A</li>
  <li class="my-superior-class-name">A</li>
  <li class="my-superior-class-name">A</li>
  <li class="my-superior-class-name">A</li>
  <li class="my-superior-class-name">A</li>
</ul>

:

<ul class="my-superior-class-name">
  <li>A</li>
  <li>A</li>
  <li>A</li>
  <li>A</li>
  <li>A</li>
  <li>A</li>
  <li>A</li>
</ul>

ul li CSS , .

Unorderd :

ul { 
  list-style-type: disc; 
  list-style-position: inside; 
}

, , ul lvl. , padding ul: ul ? inheritance.

, : , , , .

Answer 2

, OP- . display:inline-block <ul>, <li> display:inline-block <ul>, display:inherit <li> ( display: inline-block <li> , .)

, <ul> <li>, , : font-size, color, visibility ..

SNIPPET

ul {
  display: inline-block;
  list-style: none;
}
li {
  color: #000;
}
ul:last-of-type {
  display: block;
}
ul:last-of-type li {
  display: inline-block;
}

<h5><mark><code>ul { display:inline-block; }</code></mark></h5>
<ul>
  <li>Home</li>
  <li>Portfolio</li>
</ul>
<h5><mark><code>li { display:inline-block; }</code></mark></h5>
<ul>
  <li>Home</li>
  <li>Portfolio</li>
</ul>

Hide result