Bootstrap/CSS: Clearfix affects even/odd index - html

I'm using clearfix to prevent the Bootstrap grid from breaking when I use columns of different heights.
However, once the clearfix div is added to the document, the columns that appear after it in the source behave as if they have a different even/odd index than they actually do.
I have created a relevant demo. As you can see, removing the clearfix div, makes the colors of the divs change as if their index has changed.
Do you know what may be causing and what I can do to correct it?

If you look at the nth-of-type definition it specifies
The :nth-last-of-type(an+b) pseudo-class notation represents an element that has an+b-1 siblings with the same expanded element name after it in the document tree, for any zero or positive integer value of n, and has a parent element. See :nth-child() pseudo-class for the syntax of its argument.
The key thing here is that it states:
the same expanded element name
So taking that quite literally, the css selector targets a specific element and then the odd and even are matched on the specific element name and not the elements matched using the specific selector.
This is why replacing a divwith a span will work as it will never get matched as it is a different element.

Related

How to filter HTML elements based on the parent

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.

What does it mean for an element to not have a parent?

I'm reading the MDN documentation for :only-child pseudo-class, and there's one confusing point:
Note: As originally defined, the selected element had to have a parent. Beginning with Selectors Level 4, this is no longer required.
The Specifications section also lists Selectors Level 4 with a comment "Matching elements are not required to have a parent."
I'm scratching my head against the "element does not have a parent" description. Does it mean the <html> element or something like what the :root selector would match?
Does it mean the <html> element or something like what the :root selector would match?
Yep. The root element does not have a parent. Previously, this would make it not match any of the *-child pseudos, but as of Selectors 4, it's no longer excluded. But more importantly, this now also includes top-level shadow tree elements, which don't have an element parent and therefore were previously excluded as well. With this restriction removed, you can now select specific top-level shadow tree elements using those pseudos.
See Emilio's and Tab's replies to my www-style thread here from a few years ago.

CSS: Hide parent if all children are hidden

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)).

can I define in CSS look of DIV being empty? (no children elements)

Is it somehow possible to define certain look for DIV being empty, i.e having no accessors inside (no nested elements) without need of using JS, just using pure CSS?
Yes that's what the :empty pseudo-class is for.
From the MDN docs:
The :empty pseudo-class represents any element that has no children at
all. Only element nodes and text (including whitespace) are
considered. Comments or processing instructions do not affect whether
an element is considered empty or not.

checkbox label width change for one thing

I have a checkbox which has a label, in one of my css the width of this label is set to 10cm
In my form I have multiple labels however for one of my labels I want it to span the whole page rather than 10cm. I don't want to override if possible as that would ruin the look of the rest of my form as there are other labels etc in there.
How can I do this for the one checkbox label?
If the checkboxes are within the same parent, you can use nth-child or nth-of-type, alternatively you can target directly by id or using a good selector.
Demo Fiddle
Use the nth-child selector
The :nth-child(an+b) CSS pseudo-class matches an element that has
an+b-1 siblings before it in the document tree, for a given positive
or zero value for n, and has a parent element.
This can more clearly be described this way: the matching element is
the bth child of an element after all its children have been split
into groups of a elements each.
The values a and b must both be integers, and the index of an
element's first child is 1.
In other words, this class matches all children whose index fall in
the set { an + b; n = 0, 1, 2, ... }.
Among other things, this allows selectors to match every other row in
a table.
OR nth-of-type
The :nth-of-type CSS pseudo-class matches an element that has an+b-1
siblings with the same element name before it in the document tree,
for a given positive or zero value for n, and has a parent element.
See :nth-child for a more thorough description of the syntax of its
argument. This is a more flexible and useful pseudo selector if you
want to ensure you're selecting the same type of tag no matter where
it is inside the parent element, or what other different tags appear
before it.