标签云

微信群

扫码加入我们

WeChat QR Code

How do I select the <li> element that is a direct parent of the anchor element?In example my CSS would be something like this:li < a.active {property: value;}Obviously there are ways of doing this with JavaScript but I'm hoping that there is some sort of workaround that exists native to CSS Level 2.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 ideas?


More discussion of this problem at stackoverflow.com/questions/45004/…

2019年05月24日56分25秒

Are there any updates to this question? I believe the last recorded correspondence on the question was in March 2014. Whats going on with it?

2019年05月23日56分25秒

BoltClock Is there any talk about whether or not this will happen? This question is from years ago just wondering.

2019年05月24日56分25秒

KyleT: Have you seen the comments under the accepted answer? They basically document the progress that's been made over the years.

2019年05月24日56分25秒

People seem to forget what css stands for

2019年05月24日56分25秒

It would seem that it has already been suggested and rejected: stackoverflow.com/questions/45004/…

2019年05月24日56分25秒

Looks like the subject selector has been revisited, except by using a ! now: The subject of the selector can be explicitly identified by appending an exclamation mark (!) to one of the compound selectors in a selector.

2019年05月23日56分25秒

The prepended $ looked better for me... the appended ! can be overlooked more easily.

2019年05月23日56分25秒

Major plot twist! The Selectors 4 WD was just updated today to exclude the subject indicator from the fast profile, which is to be used by CSS implementations. If this change remains, it means you won't be able to use the subject indicator in stylesheets anymore (unless you use add some sort of polyfill like the one described in another answer) - you can only use it with the Selectors API and anywhere else that the complete profile may be implemented.

2019年05月24日56分25秒

Another major update: it looks like they're considering doing away with the subject selector syntax altogether and replacing it with the :has() pseudo everybody has come to know and love from jQuery. The latest ED has removed all references to the subject indicator, and replaced it with the :has() pseudo. I don't know the exact reasons, but the CSSWG held a poll some time ago and the results must have influenced this decision. It's most likely for compatibility with jQuery (so it can leverage qSA without modifications), and because the subject indicator syntax proved too confusing.

2019年05月24日56分25秒

You can't shift the pseudo selector to the list item, as it is not a focusable element. He's using the :active selector, so when the anchor is active he wants the list item to be affected. List items will never be in the active state. As an aside, it's unfortunate that such a selector doesn't exist. Getting a pure CSS menu to be fully keyboard accessible seems to be impossible without it (using sibling selectors you can make submenus created using nested lists to appear, but once the list gains focus it becomes hidden again). If there are any CSS-only solutions to this particular conun

2019年05月23日56分25秒

Dominic Aquilina Take a look at the question, the OP is using a class, not a pseudo selector.

2019年05月23日56分25秒

suppose using jquery patent() would be faster. This need testing, however

2019年05月24日56分25秒

Idered It fails when you have CSS declaration of a Selector Subject with no child selector (#a! alone throws an error, #a! p works), and so the others will not works either because of Uncaught TypeError: Cannot call method 'split' of undefined: see jsfiddle.net/HerrSerker/VkVPs

2019年05月24日56分25秒

HerrSerker I think #a! is an invalid selector,what should it select?

2019年05月24日56分25秒

Idered I don't know. The spec doesn't say it is illegal. #a! should select itself. At least their should be no error in the JavaScript

2019年05月24日56分25秒

Per my comment on the accepted answer, it looks like the polyfill may be required even in the near future after all, because the subject indicator may never be implemented by browsers in CSS.

2019年05月23日56分25秒

The < selector does not exist (verified using jQuery 1.7.1).

2019年05月23日56分25秒

Perhaps that <-syntax worked in 2009 but I've updated it (for 2013).

2019年05月23日56分25秒

Even better, use jQuery's built-in :has() selector: $("li:has(a.active)").css("property", "value");. It reads similarly to CSS 4's proposed ! selector. See also: :parent selector, .parents() method, .parent() method.

2019年05月24日56分25秒

And rather than using .css("property", "value") to style the selected elements, you should usually .addClass("someClass") and have in your CSS .someClass { property: value } (via). That way, you can notate the style with the full power of CSS and any preprocessors you are using.

2019年05月23日56分25秒

so make the browser faster. the internet itself faster. this selector is definitely needed, and the reason for not implementing it is, sadly, because we live in a slow, primitive world.

2019年05月23日56分25秒

actually, the selector would make a very fast browser look slow.

2019年05月24日56分25秒

I trust that browser developers would come up with an implementation which is (at least) as fast as the javascript version, which is the one people end up using anyway.

2019年05月24日56分25秒

"we live in a slow, primitive world" cough cough new apple watch cough cough

2019年05月24日56分25秒

by making the a element display:block you can style it to fit the whole of the li area. if you can explain what style you are looking for perhaps I could help with a solution.

2019年05月23日56分25秒

this is actually an simple and elegant solution and, in many cases, it makes sense to set the class on the parent.

2019年05月24日56分25秒

This is just sibling selector, it's not child, parent... not really answering the question mate

2019年05月24日56分25秒

Or use $yourSpan.closest("ul") and you'll get the parent UL of your span element. Nevertheless your answer is completely offtopic imho. We can answer all of the CSS-taged questions with a jQuery solution.

2019年05月24日56分25秒

As identified in other answers, there is no way to do this using CSS 2. Given that constraint, the answer I provided is one I know is effective and is the simplest way to answer the question using javascript imho.

2019年05月23日56分25秒

Given your upvotes, some people agree with you. But the only answer remains the accepted one; plain and simple "it cant be done the way you want it". If the question is how to archieve 60mph on a bicycle and you answer it with "simple; get in a car and hit the gas.", it's still not an answer. Hence my comment.

2019年05月24日56分25秒

That approach would make SO almost completely useless. I search SO for how to solve problems, not to find the "only answer" doesn't address the issue. That is why SO is so awesome, because there is always more than one way to skin a cat.

2019年05月24日56分25秒

Sadly, but now this feature is out of specification as I know...

2019年05月23日56分25秒

That is correct, but limits the markup code within the a tag to certain elements only, if you want to conform to XHTML standards. For instance, you cannot use a div within a, without getting a warning of violating the schema.

2019年05月24日56分25秒

Totaly right Ivaylo! "a" is a non-block element, so can't use block elements inside it.

2019年05月24日56分25秒

In HTML5 it is perfectly fine to put block elements inside links.

2019年05月23日56分25秒

MatthewJamesTaylor and semantically it is perfectly wrong

2019年05月24日56分25秒

... if it was semantically wrong, they wouldn't have allowed it in HTML5 where it wasn't before.

2019年05月23日56分25秒

This works fine in my case, thanks! Just a not, the example would be more ilustrative if you change the color to the parent, not to the sibling, this is replace .color:focus-within .change with .color:focus-within. In my case i'm using bootstrap nav-bar that add the class to the children when active and I want to add a class to the parent .nav-bar. I think this is a pretty common scenario where I own the markup but the component css+js is bootstrap (or other) so I cannot change the behavior. Although I can add tabindex and use this css. Thanks!

2019年05月24日56分25秒

It's not at all clear to me how you mean to generalize this to some/many/most of the parent selector use cases, or even exactly which parts of this CSS are doing what. Can you add a thorough explanation?

2019年05月23日56分25秒

I did not try to apply this to real world scenarios, that is why I say "Not for production". But I think It can be applied to 2-level menu only with fixed item width. "which parts of this CSS are doing what" - .test-sibling here is actually background of parent item (the last line of CSS).

2019年05月23日56分25秒

Added explanation (css section of jsfiddle, starting from "MAIN PART")... And I was mistaken - there may be any number of sublevels.

2019年05月24日56分25秒

The need is defined by web developers' requirements, whether to have it in the spec is decided by other factors.

2019年05月23日56分25秒

false. because the DOM is a tree, they have to go to the parent before getting to the child, so the simply just go back one node. o.o

2019年05月24日56分25秒

CSS selectors are a queue so selector order is evaluated rather than the document XPath or DOM hierarchy.

2019年05月23日56分25秒

rgb At least that's what they told us.

2019年05月23日56分25秒

The project is in an early Beta stage at present. You can (at least currently) activate axe selectors in your CSS styles by including <script src="https://rouninmedia.github.io/axe/axe.js"></script> at the very end of your html document, just before </body>.

2019年05月23日56分25秒

The problem is that a CMS is generating the markup

2019年05月23日56分25秒

it's true, but only if you know the selector in advance.

2019年05月23日56分25秒

This does not select h3's parent, which was the goal. This would select h3s which are descendants of .some-parent-selector.

2019年05月24日56分25秒