Can't select element following a parent of a child having a psuedo class

[1DMF]

Hi,

I have the following HTML

            <div class="input">
                <label for="status">Status<span class="required">*</span></label>
                <span class="select">
                    <select id="status" name="status" required="required">
                        <option value="">Please Select...</option>
                        <option value="Appointed Representative">Appointed Representative</option>
                        <option value="Adviser">Adviser</option>
                        <option value="Directly Authorised">Directly Authorised</option>
                        <option value="Not Applicable">Not Applicable</option>
                    </select>
                </span><span class="tickcross" title="Please choose your current status."></span>                
            </div>

I'm trying to reference the span (.tickcross) relative to the :required select list's class so I can apply validation animation.

I've tried..

span < :required + span.tickcross::after { content: '\f071'; }
span < :required + span.tickcross {color:orange;}

span < :required.invalid + span.tickcross::after { content: '\f071'; }
span < :required.invalid + span.tickcross {color:red;} 

span < :required.valid + span.tickcross::after { content: '\f058'; }
span < :required.valid + span.tickcross {color:green;}

and also...

span! > :required + span.tickcross::after { content: '\f071'; }
span! > :required + span.tickcross {color:orange;}

span! > :required.invalid + span.tickcross::after { content: '\f071'; }
span! > :required.invalid + span.tickcross {color:red;} 

span! > :required.valid + span.tickcross::after { content: '\f058'; }
span! > :required.valid + span.tickcross {color:green;}

I just can't seem to get it right.

Can you help?

Thanks,
1DMF.

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[1DMF]

I just couldn't crack this one, I don't even know if there are parent selectors, or if they are only coming in CSS4.

So many conflicting threads and posts on the net, I got lost trying to find the answer.

In the end I amended my JQuery validation helper to include its parent...

// check form values are valid - helper
function checkValid(ele)
{

    if(ele.validity.valid)
    {   
        $(ele).removeClass('invalid'); 
        $(ele).addClass('valid'); 
[highlight #FCE94F]        $(ele).parent().removeClass('invalid'); 
        $(ele).parent().addClass('valid');[/highlight]       
    }
    else
    { 
        $(ele).removeClass('valid'); 
        $(ele).addClass('invalid'); 
[highlight #FCE94F]        $(ele).parent().removeClass('valid'); 
        $(ele).parent().addClass('invalid');[/highlight]                 
    }
    
}

And then could use the following CSS...

div.input > span + span.tickcross::after { content: '\f071'; }
div.input > span + span.tickcross {color:orange;}

div.input > span.invalid + span.tickcross::after { content: '\f071'; }
div.input > span.invalid + span.tickcross {color:red;} 

div.input > span.valid + span.tickcross::after { content: '\f058'; }
div.input > span.valid + span.tickcross {color:green;}

A workable solution to the lack in my ability to use a parent selector in CSS I guess

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[Guest_imported]

I would suggest that you try using the "general-sibling" combinator. It looks like this '~'. This will allow you to target any span you want after your first span whether it directly follows or not, as long as they belong to the same parent element.

If you wanted to target the "tickcross" span when the first span has the invalid class you could mark it up along these lines

span.invalid ~ span.tickcross {
[indent]color:orange;[/indent]
}

Hopefully that helps and can save you from having to use Jquery here.

 

[1DMF]

Is there an efficiency benefit to using tilde over plus or vice-versa, as it is always the next sibling?

Either way it won't remove the JS as that's needed to test the validity via HTML5 API, though it is not the span that really wants the invalid class, it should be the child select list element alone, which is where I get stuck with the CSS selector syntax when only the element being validated has the invalid class applied.





"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music