CSS Selector issue with list items

Question

I am facing a problem with CSS selector. I have content in "list Items(LI)" and "list Items(LI)" having class"child". I need to style for first "list Items(LI)" with the class name ".child". only in CSS.

ul{margin:0;padding:0 32px 0 32px}
li{ color:red;}
.child{
  color:green;
  background:red;
  width:100%;
}
li.child ~ .child{
  color:#fff;
  font-size:20px;
  background:green;
  width:10px;
}

<ul>
  <li>hellow</li>
  <li>hellow</li>
  <li>hellow</li>
  <li>hellow</li>
  <li>hellow</li>
  <li>hellow</li>
  <li>hellow</li>
  <li class="child">
This need to be Red Color
  </li>
  <li class="child">sub text</li>
  <li class="child">sub text</li>
  <li class="child">sub text</li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

There is no "first-of-class" type of selector in CSS - unfortunately this can't be done the way in which you intend. It would be better if you can use a unique identifier for your selector, e.g: .first-child, and then only apply this class to the first child in question. — UncaughtTypeError
– UncaughtTypeError, Commented Nov 15, 2017 at 7:27

Mr_vasu · Accepted Answer · 2017-11-15 09:33:21Z

1

Update your css rules

ul{margin:0;padding:0 32px 0 32px}
li{ color:red;}

li.child{
  color:yellow;
  font-size:20px;
}
li.child ~ .child {
    color:green;
}

edited Nov 15, 2017 at 9:33

Mr_vasu

981 silver badge11 bronze badges

answered Nov 15, 2017 at 7:18

Ajeesh KH

3501 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mohsin · Accepted Answer · 2017-11-15 07:12:57Z

0

You can try with your class name then next element in it .child > div

answered Nov 15, 2017 at 7:12

mohsin

5842 gold badges9 silver badges29 bronze badges

Comments

Mehraj Khan · Accepted Answer · 2017-11-15 07:29:17Z

0

you want like this actually you have to take another <ul> because you're not targetting first-child of '' in the middle you want or else you can use :nth-child(8) without adding other <ul> list.

ul{margin:0;padding:0 32px 0 32px}
li{ color:red;}
.child{
  color:green;
}
li.child:first-child{
  color:blue;
  font-size:20px;
}

<ul>
  <li>hellow</li>
  <li>hellow</li>
  <li>hellow</li>
  <li>hellow</li>
  <li>hellow</li>
  <li>hellow</li>
  <li>hellow</li>
  </ul>
  <ul>
  <li class="child">
  sub
  <div>
  I want differnt styles for this.
  </div>
  </li>
  <li class="child">sub text</li>
  <li class="child">sub text</li>
  <li class="child">sub text</li>
</ul>

answered Nov 15, 2017 at 7:29

Mehraj Khan

9776 silver badges18 bronze badges

1 Comment

Mr_vasu Over a year ago

its dynamic content, its may add li between li, with class name only this css need to apply.

Mr_vasu · Accepted Answer · 2017-11-15 07:59:15Z

CSS

ul{margin:0;padding:0 32px 0 32px}
li{ color:red;}
.child{
  color:green;
  background:red;
  width:100%;
}
li.child ~ .child{
  color:#fff;
  font-size:20px;
  background:green;
  width:10px;
}

HTML

<ul>
  <li>hellow</li>
  <li>hellow</li>
  <li>hellow</li>
  <li>hellow</li>
  <li>hellow</li>
  <li>hellow</li>
  <li>hellow</li>
  <li class="child">
This need to be Red Color
  </li>
  <li class="child">sub text</li>
  <li class="child">sub text</li>
  <li class="child">sub text</li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

I got solution for red color for specified text below.fiddle

<li class="child">
This need to be Red Color
  </li>

Collectives™ on Stack Overflow

CSS Selector issue with list items

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related