How can I design the HTML CSS image?-CodePudding

I'm trying to make this design:

What I do is this:

I couldn't do the round icon in the right corner of Latest and the color change from Premium to Free. Can you help me?

.body-bottom>.filter-menu>ul li {
    display: inline;
}

.body-bottom>.filter-menu>ul li a {
    padding: 15px;
    text-decoration: none;
    color: #222429;
}

.body-bottom>.filter-menu>ul li a:nth-child(2) { /* try */
    color: red;
}

<div >
    <div >
           <ul>
               <li><a href="">Latest</a></li>
               <li><a href="">Popular</a></li>
               <li>|</li>
               <li><a href="">Premium</a></li>
               <li><a href="">Free</a></li>
           </ul>
     </div>
</div>

CodePudding user response：

.body-bottom>.filter-menu>ul li {
    display: inline;
}

.body-bottom>.filter-menu>ul li a {
    padding: 15px;
    text-decoration: none;
    color: #222429;
  position:relative;
}

.body-bottom>.filter-menu>ul li:nth-of-type(1) a::after{ /* try */
    content:'';
    width:8px;
    height:8px;
  background-color:red;
  position:absolute;
  top:12px;
  right:4px;
  border-radius:50%;
}


.body-bottom>.filter-menu>ul li:nth-of-type(4) a{ /* try */
    color: orange;
}

.body-bottom>.filter-menu>ul li:nth-of-type(5) a{ /* try */
    color: blue;
}

nth-of-type pseudo-class should be added to the <li> element since you have them listed as siblings. It won't work when you apply it to the children in this situation. I created the dot as ::after pseudo-class, so there is no additional HTML. It has position:absolute to position it according to the link (position:relative). Let me know if there is something you don't understand.

CodePudding user response：

For the red color of the link.

You CSS is using nth-child on the link "a" - when you actually have only single link in each item. Instead it should be in the list item:

    .body-bottom>.filter-menu>ul li:nth-child(2) a {
    color: red;
}

CodePudding user response：

the dot after latest with position:absolute
the color for 3 and 4 link with classes

.filter-menu>ul li {
    display: inline;
}

.filter-menu>ul li a {
  padding: 15px;
  text-decoration: none;
}
.filter-menu .dark a {
  color: #222429;  
}
.filter-menu .orange a {
  color: orange;  
}
.filter-menu .blue a {
  color: lightblue;  
}
.filter-menu .point {
  position: relative;
}

.filter-menu .point a span{
  position: absolute;
  top: -5px;
  right: 5px;
  font-size: 0.6rem;
  color: orange;
}

<div >
    <div >
           <ul>
             <li ><a href="">Latest<span>●</span></a></li>
               <li ><a href="">Popular</a></li>
               <li>|</li>
               <li ><a href="">Premium</a></li>
               <li ><a href="">Free</a></li>
           </ul>
     </div>
</div>

CodePudding user response：

You're overcomplicating your CSS. To the surprise of many devs, greater specificity actually makes CSS slower. CSS is parsed right to left—not left to right. Add a few classes to your HTML and you'll see how styles become more efficient and easier to write and maintain (no nth-child needed).

:root {
  --orange: #FB9664;
  --teal: #94BAE6;
  --red: #FB4D01;
}

.body-bottom>.filter-menu li {
  display: inline;
}

.body-bottom>.filter-menu a {
  padding: 15px;
  text-decoration: none;
  color: #222429;
  font-weight: bold;
}

.body-bottom .latest {
  position: relative;
}

.body-bottom .latest::after {
  content: '';
  position: absolute;
  border-radius: 100%;
  width: 8px;
  height: 8px;
  right: 4px;
  background-color: var(--red);
}

.body-bottom .premium>a {
  color: var(--orange);
}

.body-bottom .free>a {
  color: var(--teal);
}

<div >
  <div >
    <ul>
      <li ><a href="">Latest</a></li>
      <li><a href="">Popular</a></li>
      <li>|</li>
      <li ><a href="">Premium</a></li>
      <li ><a href="">Free</a></li>
    </ul>
  </div>
</div>