ALIELESAICIOF
New Member
This has me stumped...SEE JSBIN HERE<!DOCTYPE html><html><head><meta charset=utf-8 /><title>JS Bin</title><style> .slide-nav:nth-of-type(1) { color:red } /* this should select the number 1 */</style></head><body> <div class="image"> <span class="slide" data-order="4" rel="content-images/teta.jpg" ></span> <span class="slide" data-order="3" rel="content-images/champ.jpg" ></span> <span class="slide" data-order="2" rel="content-images/clouds.jpg" ></span> <img class="slide initial" data-order="1" src="http://stackoverflow.com/questions/12767044/content-images/air.jpg" /> <span class="spinner"></span> <!-- delete this line to comment the two arrow links --> <a class="arrow next" href="javascript:void(0)">→</a> <a class="arrow prev" href="javascript:void(0)">←</a> <!-- --> <a class="slide-nav on" href="javascript:void(0)" rel="1">1</a> <a class="slide-nav" href="javascript:void(0)" rel="2">2</a> <a class="slide-nav" href="javascript:void(0)" rel="3">3</a> <a class="slide-nav" href="javascript:void(0)" rel="4">4</a> </div></body></html>QuestionWhy does the .slide-nav:nth-of-type(1) { color:red } only work when the two additional links above the numbers are removed?In the jsbin, delete the two arrows, or delete the commented line to comment that block and you'll see that the .slide-nav:nth-of-type(1) selector works magically.For the life of me, it appears that it should just work regardless. What am I missing here?