Kevin Powell - Community•4w ago

Does order matters when defining a class for a parent element and its child elements?

Hello guys, it's been a long time I'haven't touch HTML/CSS and I need to refresh a bit... can someone explain why when I try to change the class from the ul block to the nav block instead, nothing seems to happen please

.navigation-bar{
    display: flex;
}

.navigation-bar{
    display: flex;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles/test.css" />
    <title>Document</title>
  </head>
  <body>
    <nav>
      <ul class="navigation-bar">
        <li>Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
        <li>Link 4</li>
        <li>Link 5</li>
      </ul>
    </nav>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles/test.css" />
    <title>Document</title>
  </head>
  <body>
    <nav>
      <ul class="navigation-bar">
        <li>Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
        <li>Link 4</li>
        <li>Link 5</li>
      </ul>
    </nav>
  </body>
</html>

7 Replies

Lamer of Sweden•4w ago

If setting/moving the class .navigation-bar to <nav> element the flex item will only be one so nothing to flex.

Faker•4w ago

hmm like it will try to only flex the ul tag and not its content ?

Lamer of Sweden•4w ago

Only direct children

Faker•4w ago

the flex only act on direct children of the element ? oh okay I see

Lamer of Sweden•4w ago

https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-examples

Chris Coyier

CSS-Tricks

CSS Flexbox Layout Guide | CSS-Tricks

Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser support chart.

Faker•4w ago

thanks !!

Lamer of Sweden•4w ago

No worries

Gaming

Programming

Does order matters when defining a class for a parent element and its child elements?