This way of styling, is there a place to be or is it better to do it differently?

I also tried to set block type to elements a , but to apply a pseudo :first-child class :first-child to element a did not work, only to elements li .

 nav ul { width: 700px; margin: 0; padding: 0; background: #f3f3f3; } nav li { list-style-position: inside; } nav a { text-decoration: none; text-transform: uppercase; color: #b2b2b2; } .top-menu { margin: 15px 0; font-family: "Oswald"; font-size: 14px; line-height: 40px; border: 1px solid #e7e7e7; } .top-menu li { display: inline-block; margin-right: -4px; padding: 0 33px; } .top-menu li:first-child { padding: 0 42px; } /* .top-menu a { display: block; padding: 0px 33px; font-weight: 300; } */ .top-menu .active { background: #29c5e6; } .top-menu .active a { color: #fff; } 
 <nav> <ul class="top-menu"> <li><a href="#">Home</a> </li> <li class="active"><a href="#">About us</a> </li> <li><a href="#">Services</a> </li> <li><a href="#">Partners</a> </li> <li><a href="#">Customers</a> </li> </ul> </nav>

  • quite an acceptable way of styling! - HamSter
  • Why not. Not bad implementation - Yuri
  • there is a place to be) - Alex
  • one
    And what caused the doubts? - Alex
  • I'm just learning, I think in all newbies this way) but the elements (a) cannot be applied to a pseudo-class because of parent-child relations? because the element itself is a child. - John-n

1 answer 1

Using inline-block to style the navigation on the site is quite acceptable practice:

 nav ul { width: 700px; margin: 0; padding: 0; background: #f3f3f3; } nav li { list-style-position: inside; } nav a { text-decoration: none; text-transform: uppercase; color: #b2b2b2; } .top-menu { margin: 15px 0; font-family: "Oswald"; font-size: 14px; line-height: 40px; border: 1px solid #e7e7e7; } .top-menu li { display: inline-block; margin-right: -4px; padding: 0 33px; } .top-menu li:first-child { padding: 0 42px; } /* .top-menu a { display: block; padding: 0px 33px; font-weight: 300; } */ .top-menu .active { background: #29c5e6; } .top-menu .active a { color: #fff; } 
 <nav> <ul class="top-menu"> <li><a href="#">Home</a> </li> <li class="active"><a href="#">About us</a> </li> <li><a href="#">Services</a> </li> <li><a href="#">Partners</a> </li> <li><a href="#">Customers</a> </li> </ul> </nav>

but applying the: first-child pseudo-class to element a failed

If I understand correctly, then you wanted to do this:

 .top-menu li a:first-child { padding: 0 42px; }

If so, then this option is possible if there are several links in li ; if html would look like this:

 <li> <a href="#">Home</a> <a href="#">About us</a> ... </li>

For your own example, you can specify:

 .top-menu li:first-child a { padding: 0 42px; }

Those. styles for links inside the first image:

 nav ul { width: 700px; margin: 0; padding: 0; background: #f3f3f3; } nav li { list-style-position: inside; } nav a { text-decoration: none; text-transform: uppercase; color: #b2b2b2; } .top-menu { margin: 15px 0; font-family: "Oswald"; font-size: 14px; line-height: 40px; border: 1px solid #e7e7e7; } .top-menu li { display: inline-block; margin-right: -4px; /* padding: 0 33px; */ } .top-menu li:first-child a { padding: 0 42px; } .top-menu a { display: block; padding: 0px 33px; font-weight: 300; } .top-menu .active { background: #29c5e6; } .top-menu .active a { color: #fff; } 
 <nav> <ul class="top-menu"> <li><a href="#">Home</a> </li> <li class="active"><a href="#">About us</a> </li> <li><a href="#">Services</a> </li> <li><a href="#">Partners</a> </li> <li><a href="#">Customers</a> </li> </ul> </nav>

Other options for the implementation of navigation.

  1. float: left;

 nav ul { width: 700px; margin: 0; padding: 0; background: #f3f3f3; } nav li { list-style-position: inside; } nav a { text-decoration: none; text-transform: uppercase; color: #b2b2b2; } .top-menu { margin: 15px 0; font-family: "Oswald"; font-size: 14px; line-height: 40px; border: 1px solid #e7e7e7; overflow: hidden; } .top-menu li { display: block; float: left; } .top-menu a { display: block; padding: 0px 42px; font-weight: 300; } .top-menu li+li a { padding: 0 33px; } .top-menu .active { background: #29c5e6; } .top-menu .active a { color: #fff; } 
 <nav> <ul class="top-menu"> <li><a href="#">Home</a> </li> <li class="active"><a href="#">About us</a> </li> <li><a href="#">Services</a> </li> <li><a href="#">Partners</a> </li> <li><a href="#">Customers</a> </li> </ul> </nav>

  1. display: flex;

 nav ul { width: 700px; margin: 0; padding: 0; background: #f3f3f3; } nav li { list-style-position: inside; } nav a { text-decoration: none; text-transform: uppercase; color: #b2b2b2; } .top-menu { margin: 15px 0; font-family: "Oswald"; font-size: 14px; line-height: 40px; border: 1px solid #e7e7e7; list-style-type: none; display: flex; flex-flow: row nowrap; align-items: flex-start; align-content: center; justify-content: flex-start; } .top-menu a { display: block; padding: 0px 42px; font-weight: 300; } .top-menu li+li a { padding: 0 33px; } .top-menu .active { background: #29c5e6; } .top-menu .active a { color: #fff; } 
 <nav> <ul class="top-menu"> <li><a href="#">Home</a> </li> <li class="active"><a href="#">About us</a> </li> <li><a href="#">Services</a> </li> <li><a href="#">Partners</a> </li> <li><a href="#">Customers</a> </li> </ul> </nav>

  1. display: table;

 nav ul { width: 700px; margin: 0; padding: 0; background: #f3f3f3; } nav li { list-style-position: inside; } nav a { text-decoration: none; text-transform: uppercase; color: #b2b2b2; } .top-menu { margin: 15px 0; font-family: "Oswald"; font-size: 14px; line-height: 40px; border: 1px solid #e7e7e7; list-style-type: none; display: table; } .top-menu li { display: table-cell; } .top-menu a { display: block; padding: 0px 42px; font-weight: 300; } .top-menu li+li a { padding: 0 33px; } .top-menu .active { background: #29c5e6; } .top-menu .active a { color: #fff; } 
 <nav> <ul class="top-menu"> <li><a href="#">Home</a> </li> <li class="active"><a href="#">About us</a> </li> <li><a href="#">Services</a> </li> <li><a href="#">Partners</a> </li> <li><a href="#">Customers</a> </li> </ul> </nav>

...

  • Thank you for such a meaningful answer) - John-n