INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

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

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

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

(OP)
Hi,

I have the following HTML

CODE

<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..

CODE

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...

CODE

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

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

(OP)
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...

CODE

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

    if(ele.validity.valid)
    {   
        $(ele).removeClass('invalid'); 
        $(ele).addClass('valid'); 
        $(ele).parent().removeClass('invalid'); 
        $(ele).parent().addClass('valid');       
    }
    else
    { 
        $(ele).removeClass('valid'); 
        $(ele).addClass('invalid'); 
        $(ele).parent().removeClass('valid'); 
        $(ele).parent().addClass('invalid');                 
    }
    
} 

And then could use the following CSS...

CODE

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 smile

"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

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

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

CODE --> css

span.invalid ~ span.tickcross {
color:orange;
}

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

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

(OP)
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

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close