How to Use Div as a Direct Child of Ul

Can I use div as a direct child of UL?

No. The only element that may be a child of <ul> is <li>.

HTML 4:

<!ELEMENT UL - - (LI)+                 -- unordered list -->

(See also how to read a content model definition in a DTD)

HTML 5:

Content model:
Zero or more li elements.

Is there a CSS selector for the first direct child only?

What you posted literally means "Find any divs that are inside of section divs and are the first child of their parent." The sub contains one tag that matches that description.

It is unclear to me whether you want both children of the main div or not. If so, use this:

div.section > div

If you only want the header, use this:

div.section > div:first-child

Using the > changes the description to: "Find any divs that are the direct descendents of section divs" which is what you want.

Please note that all major browsers support this method, except IE6. If IE6 support is mission-critical, you will have to add classes to the child divs and use that, instead. Otherwise, it's not worth caring about.

CSS select direct child items only

You're only selecting the parent ul with >, you'll need to add another to also pick immediate children of that ul, for example:

.nav > ul > li > a:hover{
    color: red;
}

You'll also need to add li > a:hover to select the anchor elements inside them, since the child <a> elements are also within the <li> scope.

Is this HTML structure valid? UL DIV { LI, LI } , DIV { LI, LI } , DIV { LI, LI }

No, div is not allowed as a direct child of ul. Whenever you're in doubt, validate your page with W3C or check the corresponding article on W3C:

4.5.6 The ul element

Categories

Flow content.

Contexts in which this element can be used:

Where flow content is expected.

Content model:

Zero or more li elements.

Content attributes:

Global attributes

DOM interface:

interface HTMLUListElement : HTMLElement {};

Instead you could use

<ul class="blog-category">
    <li class="three column">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </li>
    <li class="three column">
        <ul>
            <li>Item 4</li>
            ...
        </ul>
    </li>
</ul>


 

Why selecting the first child inside ul is not working while the text is inside the a

Your scss is wrong - have a look below:

.nav-bar-inner-items {
  ul {
    display: flex;
    align-items: center;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    li {
      margin: 0 13px;
      &:first-child { // <--- first child is the <li> 
        background: red;
      }
    }
  }
}

CSS exact child selector

Your current code selects any li within the first level ul. The child list li tags are still descendants of the first ul so get styled. You need to also use select the direct descendant of the ul:

#content > ul > li {
   background: black;
   color: white;
}

However, you also have the issue that all child lists are inside of that styled li. The child elements don't have a background or color set so the background is transparent and the color is inherited. You need to apply a new background and color to override those styles.

#content>ul>li {  background: black;  color: white;}
#content li li {  background: white;  color: black;}

<div id="content">  <ul>    <li>List Item With ul      <ul>        <li>Sub list item</li>        <li>Sub list item</li>        <li>Sub list item</li>      </ul>    </li>    <li>List Item</li>    <li>List Item</li>  </ul></div>

li { list-style-image: none; }

ul > li { font-weight: bold; }

ul li { font-weight: bold; }
ul li li { font-weight: normal; }

.nav-collapse .nav:first-child {}

.nav-collapse > .nav:first-child {}