Slamini Slamini - 1 year ago 54
CSS Question

Contextual selectors

could anyone tell me please, how would the contextual selector for "button3" looked like?

<div class="LeftPanel">
<div class="MenuBar">
<a href="#">Akvárium</a>
<a href="#">Rybičky</a>
<a class="button3" href="#">Rostliny</a>
<a href="#">odkazy</a>
</div>


I solved this problem by making another div element like this:

<div class="LeftPanel">
<div class="MenuBar">
<a href="#">Akvárium</a>
<a href="#">Rybičky</a>
<div class"xxxx"> <a class="button3" href="#">Rostliny</a> </div>
<a href="#">odkazy</a>
</div>


Then the contextual selector looks like this: div.MenuBar div.xxxx a:before{}
Doesn't exist better way how to do it guys?

Thank you for every help.

Answer Source

If you want to pick up this element you can do it by many ways:

  1. .MenuBar > a.button3:before {...}

  2. .MenuBar > a:nth-of-type(3):before {...}

  3. .MenuBar > a:nth-child(3):before {...}

  4. .MenuBar > a[class="button3"]:before {...}

Generally it depends on conditions and context.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download