CODEWITHSUNDEEP
htmlcss
fauverism
fauverism

Reputation: 1992

Bring focus styles to p element with a tabindex applied to span inside of an li

I want to apply the styles that are on the li's, to the p element, when the tabindex focus in applied to the span tags within the li.

Any idea on how to do this?

Here's the fiddle with attempts. http://jsfiddle.net/fauverism/dK3kV/

<ul id="nav">
<li id="home" tabindex="2" style=""><span>Home</span></li>
<li id="about" tabindex="3"><span>About</span></li>
<li id="portfolio" tabindex="4"><span>Portfolio</span></li>
<li id="contact">
    <span id="phone" tabindex="7"></span>
    <span id="email" tabindex="8"></span>
    <span id="fax" tabindex="9"></span>
    <p>Contact</p>
</li>


#nav {
    background: #ccc;
    border: 1px solid #f5f5f5;
    margin: 0;
    width: 300px;    
}
li {
    color: gray;
    display: block;
    list-style-type: none;
}
li:focus {
    background: yellow;
    color: blue;
}
/* Attempts below */
li:focus p {
    background: blue;
    color: yellow;   
}
li:focus > p {
    background: blue;
    color: yellow;   
}

PS I'd prefer to not use javascript and I cannot put the tabindex on the #contact.

Upvotes: 0

Views: 147

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 105853

maybe you look for adjacent selector ? basicly: 

:focus ~ p {
    color:red;    
}

http://jsfiddle.net/dK3kV/3/ this would be : http://jsfiddle.net/dK3kV/4/

Upvotes: 1

Related Questions