CSS :: child set to change color on parent hover, but changes also when hovered itself

Question

I have an <a> with a <span> children. I have written some CSS which changes the border-color of the children when the parent is hovered, but it also changes the border-color when I hover the children, which it shouldn't.

a {      padding: 50px;      border: 1px solid black;  }    a span {      position: absolute;      top: 200px;      padding: 30px;      border: 10px solid green;  }    a:hover span {      border: 10px solid red;  }   

<a>      Parent text      <span>Child text</span>      </a>

Answer 1

Update

The below made sense for 2013. However, now, I would use the :not() selector as described below.

---

CSS can be overwritten.

DEMO: http://jsfiddle.net/persianturtle/J4SUb/

Use this:

.parent {   padding: 50px;   border: 1px solid black; }  .parent span {   position: absolute;   top: 200px;   padding: 30px;   border: 10px solid green; }  .parent:hover span {   border: 10px solid red; }  .parent span:hover {   border: 10px solid green; }

<a class="parent">     Parent text     <span>Child text</span>     </a>

Answer 2

If you don't care about supporting old browsers, you can use :not() to exclude that element:

.parent:hover span:not(:hover) {     border: 10px solid red; } 

Demo: http://jsfiddle.net/vz9A9/1/

If you do want to support them, the I guess you'll have to either use JavaScript or override the CSS properties again:

.parent span:hover {     border: 10px solid green; }