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.
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 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)).
<div class="thumbnail-popular" style="background: url('http://images.gogoanime.tv/images/upload/Go!.Princess.Precure.full.1812487.jpg');"></div>
I am trying to get the url component of this div class but I seem to be unable to fetch that specific data in the div class.
I have looked into making use of attributes but my attempts have been unsuccessful so far.
Usage of this CSS selector is through Kimonolabs.
div.thumbnail-popular should get you the element you're looking for — unless there is more than one such element, in which case you will need to narrow down your selector.
For example you will need to find out if this particular element belongs to a specific parent, or is the first, second, ... nth child, or any other information about the surrounding elements in the page that you're working with.
The background URL is in a style attribute on this element, so you will need to extract that attribute as described here. However you will still need to parse the declarations inside the style value in order to get the URL; I am not sure if it is possible to do this through kimono as I am not familiar with it (I'm not sure what its advanced mode really does, and it's difficult to tell from the lone screenshot that is provided in that help article).
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!
I am currently trying to properly CSS style a SELECT element.
Specifically, what I want to do is to have the initial selected value be a bit distanced from the arrow/select/icon/whatever that opens the list of options.
Currently, it appears as: VALUE[V] where [V] is the triangle/arrow button. I want to create a spacing between the end of VALUE, whatever that comes to be, and the [V] button/part of the select element. Margin is obviously not relevant and padding takes place outside of the [V] as well.
Since I have several SELECT's - is there a 'CLEAN' or 'ELEGANT' method to do this through CSS other than individually giving a width to each of these elements?
Regards
G.Campos
Why cant you use padding? It seems to do what you are after.. Check this out:
http://jsfiddle.net/GYyKh/1/
Make your select have a class so that you can call it from your css. Then do something like
.spacer {
width:500px;
}
That will give all the elements with that class name a width that you specify
You may find this article useful: http://css-tricks.com/select-cuts-off-options-in-ie-fix/
It suggests different possibilities with JavaScript.