HI friends..
In a menu suppose there is an item MAIN that has drop down fro its sub categories (sub1, sub2, sub3,...). Now when mouse :hovers over MAIN I can do what ever I want. But when mouse hovers over any of its sub categories, say sub1, I want MAIN to look bold and of a particular. How can I achieve this using CSS.
thanks..
In all brevity, you can't. There's no such thing as a parent selector in CSS, even though it has been discussed in the past. But if you consider the C in CSS carefully, a parent selector doesn't make much sense in any case.
Here's another question which deals with a related/similar issue: Complex CSS selector for parent of active child
Related
I have a list with groups in it, and use CSSOM to dynamically filter the contents using a text field. This is a way to implement a "search" using only CSS.
Unfortunately when the filter filters everything out, the group containers still remain visible. I'd need to also set display: none onto them using CSS somehow, otherwise I need to add a bunch of JS to control them.
Is this remotely possible? I know this is a big of a long shot, but is there a selector that can select elements whose children (fitting some selector) all must have a style selected on them?
Is it even possible if I greatly relax the constraints, where this might be a selector that selects elements whose children (fitting some selector) all must have a particular class?
No, it's impossible only via CSS:
There is no parent selector.
There is no visibility selector, except something like :not([style*="display:none"]):not([style*="display: none"]) if you hide elements only using inline CSS.
There is no CSS way to know if all children satisfy some condition.
This can be solved only using pure JS loops and conditions or via jQuery selectors like .parent:not(:has(:visible)).
I wish to extract the entire CSS affecting a div that is highlighted. With complex designs the CSS is made up of many classes which add in some CSS. Looking for a technique that can strip out and perhaps concatenate all these together, like Inspect Element but cleaner.
For example, on this Adobe Experience Page(http://www.adobe.com/uk/products/experience-design.html). I wish to select the article div "A new experience in user experience." and then pull out all the CSS affecting everything inside it attached to a class.
There is an ExtractCSS tool that does something similar, but looking for something a bit more intuitive. That ignores all the strikethroughs too.
The simplest way is:
Select your element in the developer tools
Run window.getComputedStyle($0).cssText on the Js console
where $0 represents the currently selected DOM element.
In alternative, if you want to target a specific element with a given class, then do
window.getComputedStyle( document.getElementsByClassName('hero2-align-2 hero2-basis-0')[0] ).cssText
Querying elements by class name might return more than 1 element, the [0] is there to guarantee only one is processed.
Or by id
window.getComputedStyle( document.getElementById('yourID') ).cssText
Usually I set the hover style of a link by the pseudo-class as shown at e.g. W3Schools.
a:hover { border: solid; }
However, on the current project, I'm only able to control the styles being assigned, not the classes. So, I'm only allowed to provide a statement as follows:
formats.Add("border", "solid");
if I want to affect the looks of the product. Is there a CSS version of style that makes the link look one way or the other? In this particular case, all the effects (hover, active etc.) are supposed to look the same, if it makes it any easier.
You can't do that this way. In practice, there are only tow options.
User class and affect the elements the right way.
Forget about it and try to work another angle.
I have a system that dynamically add classes to items, and I am hoping to be able to use :nth-child(3n) on the items that don't have that class, i.e. it "skips" the items with the dynamic class.
I created a CodePen demonstrating what I want and showing that I hoped using :not() would work, but it doesn't. I would hope it removes it from the items selected, but it doesn't appear to do that. :-/
I also tried replacing :nth-child with :nth-of-type in the example (which makes even more sense) to me, but it didn't change anything.
http://codepen.io/CWSpear/pen/qoaJC/
It would be awesome to be able to do this without JavaScript.
I have a CSS/HTML based menu and when i hover on a single menu item All child menu items shown. what can be the
root course for this problem ?
where should i start debugging in CSS file or HTML list ?
What can be the common curses for this ?
(Rather posting the code i prefer to solve this for own learning experience !
It sounds like a CSS selector issue. If more things are showing than you expect, it could be that the CSS selector (for :hover) is too broad and is picking up more items than you intend. You may need to make the CSS selector be more selective so that it only affects some of the child menus at a given time. You might be able to do this by defining different selectors that start with different IDs and then apply the :hover to just child elements of a specific element. If your code is a pure HTML/CSS implementation, that seems to be the most likely cause. It could also be that they way you have structured the HTML causes all of the child menu items to fall under the same parent element (or branch), so you may also need to ensure that each set of child menus has some unique parent/grandparent that you can base the CSS selectors on. Hope that helps point you in the right direction--good luck with figuring it out!