CODEWITHSUNDEEP
htmlcss
Steve Wilson
Steve Wilson

Reputation: 1

Different style for same element

I have a site that is generated by an application using a template. My problem is that I am trying to use some transition effects on some images.

The code for the images and transitions is set in <ul> & <li> elements but that messes up the template <ul> & <li> styles. Is there a way for me to set some css that still targets the <ul> <li> elements but picking out the one I want set on the image code.

Upvotes: 0

Views: 43

Answers (1)

Aram Mkrtchyan
Aram Mkrtchyan

Reputation: 2700

you can select li by :nth-of-type() and give your special style

li:nth-of-type(1) {
  background: red;
}
li:nth-of-type(2) {
  background: green;
}
li:nth-of-type(3) {
  background: blue;
}
li:nth-of-type(4) {
  background: orange;
}
<ul>
  <li>asd</li>
  <li>asd</li>
  <li>asd</li>
  <li>asd</li>
  <li>asd</li>
  <li>asd</li>
  <li>asd</li>
  <li>asd</li>
  <li>asd</li>
  <li>asd</li>
  <li>asd</li>
</ul>

Upvotes: 1

Related Questions