🤩 New Cool Developer Tools for you. Explore →
FREE JavaScript Video Series Start Learning →
FLAT 75% OFF All Interactive courses at flat ₹250 / $3.25 only. HURRRRRY!! Explore now
  Signup/Sign In
Tests
MCQs to test your knowledge.
Forum
Engage with the community.
Compilers
Compilers to execute code in browser.
← Back to Questions
Ask Question
Not satisfied by the Answer? Still looking for a better solution?
Ask Question

Is there a parent selector in CSS?

How to select the <li> element that is a direct parent of the anchor element in CSS?


li < a.active {

    property: value;

}


The menu that I am trying to style is being spewed out by a CMS, so I can't move the active element to the <li> element... (unless I theme the menu creation module which I'd rather not do).

Any suggestions would help a lot
css javascript
by

2 Answers

Bharatgxwzm
Attempt to change a to block show, and afterwards utilize any style you need. The a component will fill the li component, and you will actually want to alter its look as you need. Remember to set li padding to 0.
li {

  padding: 0;

  overflow: hidden;

}

a {

  display: block;

  width: 100%;

  color: ..., background: ..., border-radius: ..., etc...

}

a.active {

  color: ..., background: ...

}
MounikaDasa
There is no parent selector; just the way there is no previous sibling selector. One good reason for not having these selectors is because the browser has to traverse through all children of an element to determine whether or not a class should be applied. For example, if you wrote:

body:contains-selector(a.active) { background: red; }

Then the browser will have to wait until it has loaded and parsed everything until the </body> to determine if the page should be red or not.

Login / Signup to Answer the Question.

LoginSignup