This question already has answers here:
How to get nth-child selector to skip hidden divs [duplicate]
(4 answers)
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 5 years ago.
I'm making a table-like layout on page where I can remove rows. I only want the row labels to show when they are for the first row and so I have used the :first-of-type CSS selector to display them and then have hidden all the other labels else. A simplified version of the html roughly looks like this:
<div class="container">
<div class="row">
<label>Name</label>
<input></input>
</div>
<div class="row">
<label>Name</label>
<input></input>
</div>
</div>
And a simplified CSS like this:
.row label {
display:none;
}
.row:first-of-type label {
display:inline-block;
}
This works fine except when I set the first row to display:none it still considers the un-displayed row the first-of-type and so the labels don't show in the row that is displayed. This all uses JQuery and so I suppose I could dynamically add and remove a .first-row class but I was hoping for something more elegant using CSS. Any ideas? I don't think you can do a :not() selector based on a style value can you?
Related
This question already has answers here:
Select elements by attribute in CSS
(6 answers)
Closed 2 years ago.
I'm trying to hide a specific div using a css code but it's not working
<div class="test" data-type="category">
whenever i try to use
.test{
display:none;
}
it hides the whole test div's, i need to be able to hide the category data-type.
Thanks
You can specify any element with their attribute by using element[attribute=value] in you css.
In your example you can do something like this
.test[data-type="category"] {
display: none;
}
<div class="test" data-type="category">
Some text.
</div>
This question already has answers here:
Using regular expression in css?
(6 answers)
Closed 3 years ago.
I have div named #mobile_div_111X222X333-99, 111X222X333 is question id which can change. I have lots of questions but I want to select every div that contains #mobile_div_{any_ID}-99 is it anyway to do that with css only?
Althought CSS does not support regular expression query selector, with your case, we can select div that has id attribute starts with mobile_div_ and ends with -99
div[id^="mobile_div_"][id$="-99"] {
// your style
}
We use two CSS3 selectors here:
^= starts with
$= ends with
Refs:
https://www.w3schools.com/cssref/sel_attr_begin.asp
https://www.w3schools.com/cssref/sel_attr_end.asp
You can use prefix attribute selectors with [x^=y], i.e. [id^=mobile_div_].
If that's not specific enough, you can stack a suffix attribute selector on top, using the syntax [x$=y], i.e. [id$=-99], for a complete selector of [id^=mobile_div_][id$=-99]. Note the lack of a space between the brackets.
You can use is like this -
HTML
<div id="abc-123">
<h1>helo</h1>
</div>
<div id="123-xyz">
<h1>helo</h1>
</div>
<div id="mobile_div_a-99">
<h1>helo</h1>
</div>
<div id="mobile_div_b-11">
<h1>helo</h1>
</div>
<div id="mobile_div_c-99">
<h1>helo</h1>
</div>
The (^) is used for "starting with" and ($) is used for "ending with".
[id^="abc"]{
color:blue;
}
[id$="xyz"]{
color:green;
}
[id^="mobile_div_"][id$='-99']{
background-color:red;
}
if id='abc-xyz', since CSS is Cascading Style Sheets (ie: top to bottom approach ) , the text color will be green.
This question already has answers here:
CSS negation pseudo-class :not() for parent/ancestor elements
(2 answers)
What does the ">" (greater-than sign) CSS selector mean?
(8 answers)
Closed 3 years ago.
In the following JSFiddle I have an example of attempting to not apply a style on an object that is inside a div with the class .k-grid.
In the given example the following line of code does not work as I expected.
As far as I understand CSS i'm saying: Every P object, that doesn't have the "fancy" class, and are not somewhere inside a div object with a .k-grid.
Since my given p object is inside a div with .k-grid, I dont expect it to turn green.. but it does.
<style>
form.editform div:not(.k-grid) p:not(.fancy) {
color: green;
}
</style>
<form class="editform">
<div>
<div class="k-grid">
<p>I am a paragraph.</p>
<p class="fancy">
<span class="notfancy">I am so very fancy!</span></p>
<div class="fancy">I am NOT a paragraph.</div>
</div>
</div>
</form>
When I change form.editform div:not(.k-grid) p:not(.fancy) to form.editform div:not(.k-grid)>p:not(.fancy) it does properly exclude the p fancy from becoming green.
Can someone explain to me why a space does not work in removing the class from the object, while the > does work? As well as explain what the difference is between "descendents" and "children".
Descendents are children, and descendents of children (e.g. grandchildren, grand-grandchildren, etc). Your <span> is a descendant of <form>, but not a child of it.
In no case is <div class="k-grid"> getting matched to div:not(.k-grid).
Your selector is picking up <form class="editform"> as its form.editform, its descendant (and incidentally a child) <div> for div:not(.k-grid), and its descendant (more precisely, grandchild) <p> for p:not(.fancy). You can check that this is what is going on by changing <div> to e.g. <article>, and seeing the CSS rule stop having an effect.
When you change the last part of your selector to child selector, <p> cannot match because it is a grandchild of <div>.
This question already has answers here:
How do I select the "last child" with a specific class name in CSS? [duplicate]
(6 answers)
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 3 years ago.
I'm dynamically adding and removing classes to and from elements on specific JS events. What I would like to do is select the last child element that has none these classes with CSS.
Example #1
<container-element>
<h2></h2>
<div class='some-class'></div>
<div></div>
<div></div> <!-- select this div -->
</container-element>
Example #2
<container-element>
<h2></h2>
<div></div>
<div></div> <!-- select this div -->
<div class='some-class'></div>
</container-element>
Is it possible to write a CSS selector to do this?
Something like container-element > div:not(.select):last-of-type?
Per this answer, the solution would technically be container-element > div:nth-last-child(1 of :not(.select)).
However, this of S clause in :nth-last-child is still not supported by any browser other than Safari.
You're saying: select the last sibling that doesn't contain a class attribute.
I don't believe it's possible with currently available CSS.
You're asking a waterfall (the cascade) to run upward. The browser needs to check the last element, then check the ones that came before it. This is not how CSS works.
div:not(.some-class):last-of-type won't work because the browser doesn't move up automatically to the next sibling.
Of course I can do this with JS, but preferred a pure CSS solution. Supposedly a pure CSS solution is not possible, so the next best thing is an CSS solution with a little extra HTML.
The trick was to add a class, not-selected, to all of the elements, then remove this class from the element that you want to target with the CSS selector.
And the CSS selector would be div:not([class*='not-selected']).
div:not([class*='not-selected']) {
background: red;
}
<button type='button'>
<h2>title</h2>
<div class='not-selected'>option one</div>
<div>option two</div>
<div class='not-selected'>option three</div>
</button>
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 4 years ago.
I have a number of DIVs on the page with class="row". I need a selector for one that had a child div with id="test".
<div class="row">
<div class="col col-12">
<div id="test">
This is a test
</div>
</div>
</div>
How do I select that particular row?
div.row div#test
did not work for me.
I tried accessing it using
$('div.row div#test ').show();
but nothing happened.
$('div.row').has('div#test').show()
With $('div.row') you get the row's divs. The method 'has('div#test')` applies a filter on these elements but still returns the row divs. See jQuery.has()
Here is an example: jsFiddle
Maybe this works for you?
$('#test').parent().parent()
You would only need to specify..... #test
You can use jQuery .find helper to let it work with one or multiple same ids:
$('div.row').find('div#test').show();