". The Selector is created using a greater-than sign (>) between the parent and child selector. and you want that the div or li change the background on a:hover or a:focus with parent you could do something like: Selectors have been optimized for use with HTML and XML, and are designed to be usable in performance-critical code. The method I used can be found here: jQuery Dynamic API Browser. In the example below we have used the span, em and strong selectors. E.g. Heck I could go use markup to style my pages too…. What we … It also supports many additional combinators like getPreviousSiblings. Does div < img match the div in I think he says it would, but if it does, is it possible to qualify a selector with a statement that *doesn’t* begin with a descendant selector? Not sure what character is best to use, but this alleviates many of the concerns with the last element not representing the element to be styled, and also avoids the confusion with the reverse markup I mentioned earlier. Firefox for some reason doesn’t like backgrounds set on an input element like radio and checkboxes. I’m referring to, “In this example, it would select img tags but only if they were a child of an a tag.”. These images are almost always floated. Here’s one I ran into yesterday – I was styling a nav that is automatically generated from a CMS (so I have no way to add a class or id to the markup AND the order of the nav links might change over time, so I couldn’t use :nth selectors). img:parent(figure) would match all ancestor figure elements of the img. Mmm… my english is not so good, but I agree with Ivan : the example and the explanation don’t match with the topic of the article (you made a typo probably). If that’s still overbearing, you can narrow the selection down to a single element by specifying the index. If there’s a supported CSS option to something, why would we want to exclude that from our bag of tricks just because there’s a solution that can be achieved with server or client side scripting? I don’t see real use of this. 1. 5*{ Rather than what you said, the (proposed) code above would select an a tag, but only if it was the parent of an img tag. Could take inspiration from jQuery and use: a:has(img) { Because in every other css selector, it's the last element that describes what's getting styled. I am no CSS expert but “:contains” could have been the best candidate for this kind of functionality. element > element. I’d personally perfer it how I described it, meaning that the part of the selector furthest to the right would still be the actual element being selected, rather than the one furthest to the left. One good reason for parent selectors is when styling radio or checkboxes. Making this clear will make reading and writing these styles a lot simpler. Maybe this can be put under a “CSS wish list” for future features – although there is the added complication of specificity if there are conflicting rules. I’m not the first one telling this, but i think on the first example you meant “only if they were a parent of an a tag”… or not? business, with a local development tool to match. Hi there guys, Jonathan says if there was a parent selector, that would then easily be the new top dog in inefficient selectors. */ // SCSS.parent { &.skin { background: pink; } } } No, it’s not. }, a:has(> img) { div p. Selects all

elements inside

elements. Now if only someone would spec it into CSS4 or something. http://pastie.org/849838. LT, Cool tip… Will use it in my current project…. Great post, Chris. In “qualified selectors” it isn’t altogether made clear what “<” does. Anyway, seeing your examples made me confuse. Back in 2008, Shaun Inman suggested the syntax: [Corrected the following sentence]: In this example, it would select a tags but only if they contained an img tag. .parent li { background:blue; color:black; } If we want to apply the style in child class then use this. div.gallery JavaScript creations. today you do this by javascript or applying the hover to the li element. I rarely use parent selectors with JavaScript (jQuery does a pretty good job in my opinion), but I try not to. Whether the syntax would be “li < ul", "ul < li", or "li:parent", I think it should always be possible to do it multiple times, in which case the "<" is more flexible. I wanted the containing the URL http://foo.com to look a little different. But do you want to style the ‘a’ or the ‘li’? I saw several mentions of :has and maybe they were all saying they’d like that kind of syntax in CSS while I misread them to mean they were using that now for styling. To target an element that is the child of another you simply put a space between the two:. img:nth-parent(1):filter(figure) would select the parent only it it is a figure element. Parent selectors are likely to be no different. Well parent selector may come in hand but they need to support some pseudo classes too. + img (Aside: this would be a weird departure from the typical syntax where the actual elements being selected are on the right, this would be on the left). a > img selects images which descend from links Given experience I don’t think a designer should need a parent selector, in fact i think if it was introduced I would find it frustrating. Here it is compiled:.grand-child.parent.child.sibling {} What the & isn’t Definitely read through the comments on that post, it is a super interesting thread, and contains some pretty signifiant reasons parent selectors don’t exist yet. It could just be personal preference, but I would think the following syntax makes more sense, especially for more complicated selectors: Why? I agree, I’d like to see a scenario where a parent selector would be vital, would make things easier or would be more efficient (if the performance issues would not exist). CSS selector in Selenium for the same could be identified with the class name as div[role=’dialog’] or [role=’dialog’] ‘Class or ID’ & Attribute Selector Conundrum. So you could, for example, highlight a particular paragraph that contained a particular word…. What’s interesting is that there are people out there who believe since they have not seen an instance where they themselves have needed it, then it shouldn’t be considered. Thanx. img:parent(figure) would match all ancestor figure elements of the img. But the child selector still doesn’t actually select the lower-level list items. I see where you are going with this Chris, and I like the idea. Great article … but i personally never used parent tag…. @manu not her specifically; there were several comments about “well I can just do that in jQuery” (or even just Javascript, which is indeed what one has to do IF you really must determine styles based on the parent… : ( figure[tabindex=$] img[src][alt] Let’s be clear here, just in case someone is finding this from a search engine: there are no parent selectors in CSS, not even in CSS3. Will it be like this: In my current job, we are in the process of selecting a new CMS to replace our home-grown and aging (8-9yrs) CMS. If you want to select a parent element then you will have to resort to JavaScript. This salmon-like selector is very intriguing and I’m very curious on how it’ll evolve! Jonathan Snook resurfaced this topic and gives us lots of great background on how CSS rendering works. To do this, start with the element name, then write the period (.) for local development. I also div! You can have more than one descendant in the list. To mentally-compile this CSS, start at the top-most layer and work your way down pealing off the outer layers and replacing the & with the new compiled parent selector. In the following example, we apply the class only to the first div. Another solution is to combine a bit of mutation observer javascript with the css rel selector to provide a “lookahead”. Supporting it is giving people a whole lot of rope to hang themselves with. Nice article, I personally don’t need parent selectors. These CSS selectors are location specific rather than location agnostic. With that added to our head section of the html page. img:nth-parent(2) would select the grandparent of the img. Some of the LI’s also contain another UL, but some do not. No offense but, how come an "IMG" element has an "A" element as a child ??? I can see where a parent selector would be useful, as you could change, for example, the margins or colour of a h1 only if followed by a specific element. If you have important information to share, please, http://www.w3.org/TR/css3-selectors/#content-selectors, http://www.w3.org/TR/CSS2/cascade.html#cascade, http://mootools.net/core/826c8f047c6ae21b10342f3112de2cbf, http://github.com/mootools/slick/wiki/Reversed-Combinators, http://www.mattlindley.info/post/2010/07/02/Hot-Damn. Eg: x>y. parent[contains*=”grandchild.clicked”] othergrandchild { … }. CSS-Tricks is hosted by Flywheel, the best WordPress hosting in the The :has() CSS pseudo-class represents an element if any of the selectors passed as parameters (relative to the :scope of the given element) match at least one element. The list item selector is more specific, but it doesn’t select the OL or the OL LI’s, so the color remains black. You could. ShopTalk is a podcast all about front-end web design and development. /* matches an if an exists as a direct child. You could also have the server analyze how everything should look and just apply inline styling to each element as needed. You have to target the a-element. @Paul Walker – I like your idea very much, it is much cleaner than “:contains”. 2. The tech stack for this site is fairly boring. I like this one, I was thinking along the line of “circling” the selected element with parenthesis. Those concerns can be thought of as tradeoffs we should evaluate, not show-stoppers. [img src="foo.jpg" /] [a href="#"]mylink[/a] [ /img] > input[type=radio]:checked { border: 2px solid #000; }. Until this exists, solutions like the one above are what we must resort to in order to compensate. Selectorsare patterns that match against elements in a tree, and as such form one of several technologies that can be used to select nodes in an XML document. Anybody desiring to support their own custom parent combinator in valid CSS syntax should support something like /--parent/ or whatever name makes sense to you, so that you could write a selector like li /--parent/ ul {} and it would target the