javascript - Specific styling pattern for nested and non-nested links in parent -

i'm working on website, , want rather specific pattern styling of links, don't know how it.

what want following result:

• a red link

• a green link

• a red link

• a green link

• …

here's html

<div id="arandomdivforthisquestion">         <a href="#">a red link</a>         <p>             <a href="#">a green link</a>             <a href="#">a red link again</a>         </p>         <a href="#">yet again green link</a> </div><!-- /arandomdivforthisquestion --> 

… , css tried, knew not job done begin with

#arandomdivforthisquestion a:nth-of-type(odd) {     border-bottom: 1px solid red;     color: red; }  #arandomdivforthisquestion a:nth-of-type(even) {     border-bottom: 1px solid #3dcd7c;     color: #3dcd7c; } 

so, in nutshell : want every tag within tag id arandomdivforthisquestion follows pattern regardless of fact wether it's child of div, or child of child of div, …

can guys me out here?

ps: css solution, javascript solution, jquery solution, … doesn't matter.

so first things first, wrapping things in p element inherit display properties not practice. though working on front-end design, code should still structured according data/elements. if try write code according design, make things harder you, hard read/update in future. in specific case, relying on p element's attributes cause side effects , might end spending time, trying figure out wrong.

1) if need group elements, use divs.

2) group if makes sense. if coding wise.(the children of group have common properties etc.)

coming question. try using

:nth-child() 

once rid of

element.

:nth-child(odd)  :nth-child(even) 

will work switching between green , red

https://jsfiddle.net/dlh25u0r/1/

jquery solution nesting elements: in solution use:

 .each() 

which iterate through every instance of inside div want, regardless of nested or not. make sure place code inside run.

 <script>     $(document).ready(function(){           //add code     })  </script> 

and import jquery

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 

https://jsfiddle.net/8swlcdcz/