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)).
Related
I need to apply a function to checkbox elements that are not part of a bootstrap-multiselect element. To do this I'm trying to make a css selector that fitlers out based on the parent they have. The syntax that I have so far is this:
$(this).find("input[type='checkbox']:not(ul.multiselect-container>input)")
Where the :not(ul.multiselect-container>input) is my attempt to specify to the css selector that I want all css elements except for the ones that are children of an unordered list that has the class multiselect-container.
From doing some investigation it seems that this should be possible, but my syntax doesn't seem to cut it. How can I make this work with the :not function? OR perhaps another way.
I'm trying to select <a> elements that are not the parents of <img> elements. (Note: if it's relevant some of the anchors I want to select are childless.) I tried this:
a > :not(img) {}
and this:
a:not(> img) {}
but neither of them seem to work. How would I accomplish this in CSS?
There is a spec, currently in draft, for a :has() pseudo-class. No browser supports it yet. If the spec is someday approved and implemented, you'd be able to do this:
a:not(:has(img)) {
// Styles
}
The MDN page says that :has would never work in stylesheets, only in JavaScript; but in saying that, it links to a section of the spec about a "dynamic selector profile" that apparently no longer exists.
I think the browser vendors typically have a problem with implementing CSS features that require knowledge of the DOM that only exists after the selected element is created, so I don't know if we should get our hopes up for this. Someone who follows the mailing lists or is generally smarter than me might offer a better prognosis.
Unfortunately, no. You'd need to use jQuery.
You could do some kind of workaround using CSS:
Assign a class to links that do not have child elements that are images and use that class to style the links as normal (e.g. a.class{color: red})
Assign a class to links that do have an image child element, and use a:not(.class){} to change their color
Reason: There is no parent selector in CSS. See:
Is there a CSS parent selector?, CSS Parent/Ancestor Selector
I'm having trouble using some relatively simple CSS selectors using :not. Namely, the following selector is giving me an error:
a:not(.ebook_document *)
I am trying to get all <a> elements that are not children of the element with class ebook_document. This also fails:
a:not(.ebook_document > *)
As well as this:
a:not(.ebook_document, *)
Putting the selectors on their own, not in a :not section works fine. What have I done wrong?
:not only takes a simple selector. (For now, CSS 4 expands that to a selector list.)
Plus, https://developer.mozilla.org/en/docs/Web/CSS/:not -
This selector only applies to one element; you cannot use it to exclude all ancestors. For instance, body :not(table) a will still apply to links inside of a table, since will match with the :not() part of the selector."
What you want is not possible using :not.
You can only go about it the other way around - format all "normal" links, and then apply different formatting for the links inside the target element(s) using .ebook_document a { ... }
So that means rather than not applying styles to those links in the first place, you might need to overwrite the styles you don't like for those links again.
(Or use initial/all to actually reset styles, but browser support for that is still lacking AFAIK.)
Hmm shouldn't it just be a:not(.ebook_document)? I didn't test it but it seems that that should reference all the a tags that don't have a .ebook_document tag.
I am working on a project which is completely done by HTML5,MVC 4,CSS 3, JQuery, LINQ. There are a lot of ui,li and other html controls and we have done styles for those elements.
Now i have a situation that i must include a JQ Grid (http://www.trirand.com/blog/jqgrid/jqgrid.html) , we were using our own client side grid. Now what the problem is if i use the style sheet of the JQ Grid on the page, there is a possibility to get affected to other element also. Anyway i am gonna use that particular grid inside a div element i need that style sheet should be affected to that the elements which all are inside that div.
Is there any possibilities?
(I wonder if this is possible in this way ;)
<div id="jqgridcontainer" stylesheet="styles/jqgrid/jqstyles.css"> my ui elements here </div>
I know its not possible in this way )
NB: editing http://www.trirand.com/blog/jqgrid/themes/redmond/jquery-ui-custom.css[^] by adding "jqgridcontainer" div id to all the element css is not possible.
No you can't add css file to one div, you can only add style to the all document.
The only way i see to use css file to only one part of your page is to put your grid in an iframe (which is not really good...)
You can't do <div id="jqgridcontainer" stylesheet="styles/jqgrid/jqstyles.css">. If jqstyles.css is not a big file you can change the div{...} rules in it with div.jq {...} and add class jq to your divs that you want to use jq styles. If jqstyles.css is so big that you can't go through it all, give your divs, which you want to have your style, a class like 'myDivClass' and change your css to div.myDivClass {...}. You may need to mark your rules as !important or just reference jqstyles.css first and your css 2nd..
Use ids and classes properly to avoid all the division to get the same property..
I want to get all style properties of a specific html part(div, form, table, ...) and its children. I know how to search for style of any page element, using any browser(chrome, firefox, etc..). Should I look one by one for its children to obtain all css? Is there a way to get all css at one time related with an element and its children ?
The easiest way to do this is to use the Computed Style tab in the Chrome or Firefox web inspectors as this will allow you to see not only the explicitly defined styles of the element(s) in question but will also show you inherited styles from the cascade.
Otherwise you basically just need to copy ALL relevant style definitions from the element(s) and all of their parent and ancestor elements.