regicidedelferoz Posted March 12, 2012 Share Posted March 12, 2012 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! Link to comment Share on other sites More sharing options...
valiantshady Posted March 12, 2012 Share Posted March 12, 2012 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 Link to comment Share on other sites More sharing options...
eTianbun Posted March 12, 2012 Share Posted March 12, 2012 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} Link to comment Share on other sites More sharing options...
birbal Posted March 12, 2012 Share Posted March 12, 2012 this selector should work ul>a>ul Link to comment Share on other sites More sharing options...
eTianbun Posted March 12, 2012 Share Posted March 12, 2012 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')} Link to comment Share on other sites More sharing options...
eTianbun Posted March 12, 2012 Share Posted March 12, 2012 N'M¡nd Link to comment Share on other sites More sharing options...
regicidedelferoz Posted March 12, 2012 Author Share Posted March 12, 2012 What you are trying to do will only be possible, if the <a> element is below the <ul> elementul~a{color:red} or ul+a{color:blue} i tried it but the the <a> inside <ul> is the one who get styled Link to comment Share on other sites More sharing options...
eTianbun Posted March 12, 2012 Share Posted March 12, 2012 I thought you said you want to style the <a> if it is a sibling of <ul>. Link to comment Share on other sites More sharing options...
regicidedelferoz Posted March 12, 2012 Author Share Posted March 12, 2012 yah right,. i want to style the <a> but not the <a> inside the second <ul> Link to comment Share on other sites More sharing options...
eTianbun Posted March 12, 2012 Share Posted March 12, 2012 ... Link to comment Share on other sites More sharing options...
dsonesuk Posted March 12, 2012 Share Posted March 12, 2012 ??? 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 */ Link to comment Share on other sites More sharing options...
regicidedelferoz Posted March 13, 2012 Author Share Posted March 13, 2012 i got the right one,. li ul + a {color: red;} Link to comment Share on other sites More sharing options...
dsonesuk Posted March 13, 2012 Share Posted March 13, 2012 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*/ Link to comment Share on other sites More sharing options...
regicidedelferoz Posted March 14, 2012 Author Share Posted March 14, 2012 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> Link to comment Share on other sites More sharing options...
dsonesuk Posted March 14, 2012 Share Posted March 14, 2012 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.