Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by jihad miski
jihad miski
1,278 Points

can someone help me learn how to control each of the ul li elements separately ? thank you .

iam having trouble selecting each of the li elements separately i classed each of them seperately but when i add lets say a margin right it pushes everything with it i need to control each one alone without effecting the other , this is my code below if someone would shed light on the matter it would be appreciated thank you . 

<DOCTYPE html>
  <html>
  <head>
    <title>Jihad Miski</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <header class="header">
      <ul class="list">
      <li><a href="about.html" class="about">About</li></a>
      <li><a href="main.html" class="main">Main</li></a>
      <li><a href="contact.html" class="contact">Contact</li></a>
    </ul>
    </header>
  </body>
  </html>

body {
  margin: 0;
  font-size: 3em;
}

a {
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

/********************************* HEADER *************************************/

.header {
  background-image: url(../img/header-wallpaper.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.header {
  height: 700px;

}

.header {
  width: 100%;
  padding-top: 400px;

}


/********************************* suedo clases *************************************/


a:visited {
  color: black;
}

a:link {
  color: black;
}

a:active {
  color: black;
}

/********************************* ul li *************************************/

ul {
  list-style: none;
  text-align: center;
  padding: 0;


}

ul li {
  display: inline-block;

}

1 Answer

Alberto Martinez Pascual
Alberto Martinez Pascual
6,714 Points
Alberto Martinez Pascual
Alberto Martinez Pascual
6,714 Points

Hello! Did you try with the :nth-child selector? In your case it would look like:

ul li:nth-child(1) {
  display: inline-block;
}

to select the first li.

The :nth-child has a lot of power, for further reading: :nth-child