CSS gets the second element by class Name without JS

Question

I want all my titanium headers to titlebe 20 pixels high. I can accomplish this by applying this css rule:

h1[title="titanic"] {font-size:20px;}

Now I want the second heading with this class to be red. If each title had the same parent (thus in the same div), I could do this with this:

h1[title="titanic"]:nth-of-child {color:red;}

However, when my headers are not in the same parent, I do not know how to select the second heading. I want to know the css rule, I will need to color the second header red in the following example:

<h1 title="titanic">heading one</h1>
<span><h1 title="titanic">heading two</h1></span>

Answer 1

CSS n- . , , h1.

, , h1, span, ( h1 span, ..):

h1[title="titanic"] + span > h1[title="titanic"]

, , , h1 span . , span:nth-child(2), , span s:

h1[title="titanic"] + span:nth-child(2) > h1[title="titanic"]

- , .

Answer 2

- JS. DEMO

• ,

 var titanic = document.querySelectorAll('[title="titanic"]');
 titanic[1].style.color = 'red';