How to Use Pure CSS Selector to Select Hidden Element

How to use pure css selector to select hidden element

If your design is not really responsive, I mean you can just need to set fixed font-size for the inner span, I think we have a clean solution like this. The idea is to set font-size of the td to 0, it will hide the text node completely:

.col[style*="display:none"] {
  display:table-cell!important;
  font-size:0;
}
.col > span {
  font-size:20px;
}

Demo.

Targeting first visible element with pure CSS

In pure CSS, no it's not possible. Chris Coyier has :first listed as purely a jQuery construct: http://css-tricks.com/pseudo-class-selectors/.

Can I detect element visibility using only CSS?

No, it is not possible and can't be possible, at least in stylesheets.

Otherwise, you could create an infinite loop:

element:visible {
  display: none;
}

The element would be visible at first, then the selector would select it and hide it, then the selector wouldn't apply and it would become visible again, etc.

It would be possible to allow that pseudo-class only in JS APIs like querySelector. But as far as I know there isn't anything like that, and it wouldn't be CSS-only.

Hide list with one element with pure CSS

There is a pseudo class for this: :only-child (MDN)

So if I have the following CSS

li:only-child {
    display: none;
}

.. the list items will only be displayed if there is more than one list item.

FIDDLE

(Note: Like Quentin said, it doesn't hide the actual list - just the list item when it is the only child... but as long as the list itself doesn't have its own styling this would be the same as hiding the list)

Also here is an excerpt from the above MDN article:

The :only-child CSS pseudo-class represents any element which is the
only child of its parent. This is the same as :first-child:last-child
or :nth-child(1):nth-last-child(1), but with a lower specificity.

PS: As you can see from MDN Browser support - IE8 doesn't support this, so for IE8 you're out of luck for a pure CSS solution.

CSS - Hide elements (class) based on value of select box

This can't be done using a <select> item, however because of the pseudo class :checked states of checkboxes and radio buttons, you can accomplish what you wanted using those instead:

HTML

<input type="radio" id="supportCase" name="radios"> 
<label for="supportCase">Support Case</label>
<input type="radio" id="other" name="radios"> 
<label for="other">Other</label>
    <br />
<label class="applicableSupportCase">Device:</label>

CSS

input[id=other]:checked ~ .applicableSupportCase {
  visibility:hidden;
}

I used visibility, but you can change the attribute to whatever you want.

If you want an ease in and out, then create the same statement using the :not(:checked) pseudo class:

input[id=other]:not(:checked) ~ .applicableSupportCase {
  //whatever ease(out) you want here
}

JSFiddle: http://jsfiddle.net/ja2ud1Lf/

Pure CSS way to unhide a drop-down menu (or any HTML element) when a certain option in a preceding drop-down menu is selected

To summarize the issue with the obvious approach: <option> elements support :checked, but adjacency selectors (a + b, a ~ b) do not support matching subsequent elements unless they are in the same parent, therefore this cannot be used.

However, checkboxes and radiobuttons can be in a different container from their label, which can be utilized for plenty of "state" situations inside CSS - we just need to stitch together some sort of fake <select> with labels inside it, and put their <input>s outside, and then we can match via ~ as usual!

body {  font: 15px sans-serif;}
/* a slightly janky custom dropdown */.select {  margin: 0.5em 0;  line-height: 30px;  height: 25px;  width: 200px;  border: 1px solid #ddd;  /* it's a flexbox purely so that we can use `order` on the active element to move it to the top of the list */  display: flex;  flex-direction: column;}
/* restyle labels to look vaguely like options */.select label {  position: relative;  display: block;  line-height: 25px;  height: 25px;  padding: 0 0.5em;  background: white;}
/* hide labels in out-of-focus dropdowns [except the active one] */.select:not(:focus) label {  display: none;  /* this is to prevent clicking the current item instead of activating the dropdown */  pointer-events: none;  /* this is to override background from the multi-rule below */  background: white!important;}
.select:focus label {  z-index: 100;  /* and then allow clicking them once it actually has focus */  pointer-events: all;}
.select:focus label:hover {  background: #08f!important; /* ditto */  color: white;}
/*here's the catch: you can't just display:none the radiobuttons,as then your dropdown will not lose focus and thus will notclose upon changing the active item.So we just move them somewhere far away*/input.option {  position: absolute;  left: -999999px;}
/*this allows the correct label to be shown insidea dropdown when it is not open.please don't write these by hand*/#s1_1:checked ~ .select label[for="s1_1"],#s1_2:checked ~ .select label[for="s1_2"],#s1_3:checked ~ .select label[for="s1_3"],#s2_1:checked ~ .select label[for="s2_1"],#s2_2:checked ~ .select label[for="s2_2"]{  display: block;  background: #f0f0f0;  /*  makes the selected element show up on the top of the options list,   otherwise it's a bit disorienting  */  order: -1;}
/* and finally, the actual selector */#s1_2:not(:checked) ~ #s2 { display: none };

<input class="option" type="radio" name="s1" id="s1_1" checked/><input class="option" type="radio" name="s1" id="s1_2"/><input class="option" type="radio" name="s1" id="s1_3"/><div class="select" tabindex="1">  <label for="s1_1">Option 1</label>  <label for="s1_2">Option 2 [!]</label>  <label for="s1_3">Option 3</label></div>Some text after<input class="option" type="radio" name="s2" id="s2_1" checked/><input class="option" type="radio" name="s2" id="s2_2"/><div class="select" tabindex="2" id="s2">  <label for="s2_1">Option 1</label>  <label for="s2_2">Option 2</label></div>

Targeting Pure elements in next.js with CSS modules

Try giving a className or id to ul tag and then write your styles accordingly.

for example:

index.js

<div className={styles.container}>
 <ul className={styles.container__list}>
  <li>Person One</li>
 </ul>
</div>

index.module.css

.container {
  background-color: pink;
}
.container__list{
  list-style-type: none;
}

CSS :not([class*=hidden]):nth-of-type(4n+1) not working

The .box and :not() portions of your selector are irrelevant to :nth-of-type(). The only thing that is considered by :nth-of-type() is the fact that these elements are all divs. You could specify div:nth-of-type(4n+1) and it would match the same elements in exactly the same order (albeit without the attribute negation), even if there happen to be any other div elements in the same parent that are not .box.

My answer to this related question explains in detail why these selectors don't work the way you would expect, but the gist is that every selector operates independently, and :nth-of-type() just happens to care only about the element type. Also see this answer for an illustrated example.

Due to the way current CSS selectors work, there isn't a way to filter out those elements using pure CSS; you will need to use JavaScript to count elements.

---

Related Topics