Jump to content
regicidedelferoz

RESOLVED: parent / child / siblings

Recommended Posts

good day guys, how can i do this with css? i want to design all elements which has a sibling? ex.

<ul><li><a href="#">element</a>	 <ul>		 <li><a href="#">element</a></li>		</ul>	</li>	<li><a href="#">element</a></li></ul>

what i want to do is, if <a> within an <li> has a sibling (which is <ul>), i want to add style on it,. thanks in advancemore power!

Edited by Regicide Del Feroz

Share this post


Link to post
Share on other sites

Well, as far as I know and understand, CSS is not used for these purposes..It's a styling sheet language that you use and ID or a CLASS to format or add attributes to a given tag field..So, I can't seem to understand what is it exactly that you want to do with listing all siblings and what role do you want the CSS to play..Thanks

Share this post


Link to post
Share on other sites

this selector should work

ul>a>ul

Share this post


Link to post
Share on other sites

You can use javascript to archive what you realy want. EX:

parent=document.getElementById('li');if(parent.firstChild.nextSibling.nodeName=='UL'){parent.firstChild.setAttribute('style','color:green')}

Share this post


Link to post
Share on other sites
What you are trying to do will only be possible, if the <a> element is below the <ul> element
ul~a{color:red}

or

ul+a{color:blue}

i tried it but the the <a> inside <ul> is the one who get styled

Share this post


Link to post
Share on other sites

??? IF you are talking about targeting the first submenu ul , where ALL submenus UL usually directly follow a anchor element you would use

ul { color: red;} /* will target all ul */  ul ul { color: orange;} /* will overwrite the previous and target all ul below it */ul ul ul { color: yellow;} /* will overwrite the previous and target all ul below it and so on */

<ul><li><a href="#">element</a> <ul> <li><a href="#">element</a></li> </ul> </li> <li><a href="#">element</a></li></ul> same for anchors elements

ul a { color: red;} /* will target all ul */ ul ul a{ color: orange;} /* will overwrite the previous and target all ul below it */ul ul ul a{ color: yellow;} /* will overwrite the previous and target all ul below it and so on */

Edited by dsonesuk

Share this post


Link to post
Share on other sites

Well! That selector does not make sense? using '+' means select the very next following sibling element, in your example all anchor elements are CHILD elements of LI, and not UL, even with '~' you will have the same problem as it will target the specific SIBLING element wherever it is, and never the child elements. ul a { color: red;} /* will target all anchor elements */ ul ul a{ color: black;} /* will reset all anchor elements at first sublevel and below to default color black or whatever you choose, overwriting styling set from above*/

Edited by dsonesuk

Share this post


Link to post
Share on other sites

for it to work i have to change this code

<ul><li><a href="#">element</a>		 <ul>				 <li><a href="#">element</a></li>			    </ul>	    </li>	    <li><a href="#">element</a></li></ul>

to

<ul><li>		 <ul>				 <li><a href="#">element</a></li>			    </ul><a href="#">element</a>	    </li>	    <li><a href="#">element</a></li></ul>

Share this post


Link to post
Share on other sites

Ah yes that would work now, but you could use

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css">ul a {color: red;}li a:only-child{  color: black;}</style></head><body><ul><li><a href="#">element</a>		 <ul>				 <li><a href="#">element</a></li>			    </ul>	    </li>	    <li><a href="#">element</a></li>        <li><a href="#">element</a>		 <ul>				 <li><a href="#">element</a></li>                 <li><a href="#">element</a></li>			    </ul>	    </li></ul></body></html>

Only problem is :only-child is not supported in IE browser less than version 9

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...