nextSibling CSS and JS

Demonstrates retrieving next sibbling in javascript, demonstrates pseudo class on sibling selector

by Shawn Stark

HTML

<a href="#" id="one" class="icon1">one</a>
<span id="two" class="one">two</span>

<a href="#" id="three" class="icon2">three</a>    
<span id="four" class="two">four</span>

CSS

span.one, span.two {
    display:none;
}
a.icon1:hover + span.one {
    display:inline;
}
a.icon2:hover + span.two {
    display:inline;
}

JavaScript

function isDOMElement(obj){
if(typeof obj.innerHTML!=='string'){return false;}
return true;
}

var el = document.querySelector('#one');
//console.log(el.getAttribute('id'));
var stop = false;

while(el){
	console.log(isDOMElement(el));
	el = el.nextSibling;
}