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();
Related
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:
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?
This question already has answers here:
Is there a CSS selector by class prefix?
(4 answers)
Closed 8 years ago.
I want to target all of the columns inside a Bootstrap container so I can give then a similar style. For example:
<div class="container unique">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
</div>
I can target this with CSS:
.unique .col-md-3{...}
but what I want to do is when I have many different col-* elements, to target them all together.
I tried this:
.unique .col-*{...}
but it didn't work. Can I do this with CSS?
Pedro, what you're looking for is called attribute selector. In your particular case, you can use it like this:
.unique [class~=col] {color:red }
but you could also use this with more wide options like
[class*='col-']
to cover preceding white spaces.
Also, here you have the same documentation in Spanish
The CSS attribute contains selector can be used to achieve this:
.unique [class*=col]{...}
MDN is a useful reference site for CSS selectors. For reference, the attribute selectors are found here.
This question already has answers here:
How can I select the last element with a specific class, not last child inside of parent?
(8 answers)
Closed 8 years ago.
I'm trying to target the div with class "text" inside the last div with class "done".
For example:
<div class="installSteps">
<div class="insProgress done">
<div class="icon">Img</div>
<div class="text">Prep</div>
</div>
<div class="insProgress done">
<div class="icon">Img</div>
<div class="text">Check</div> < trying to target this
</div>
<div class="insProgress upcoming">
<div class="icon">Img</div>
<div class="text">Configure</div>
</div>
<div class="insProgress upcoming">
<div class="icon">Img</div>
<div class="text">Go!</div>
</div>
</div>
I tried all kinds of combinations of last-child and last-of-type to no avail. I really thought this would work:
.installSteps .done:last-child .text
Any way to do it?
EDIT: Adding some additional details...
The "done" class replaces the "upcoming" class as the processes complete. So it starts with all "upcoming" and then the first one gets "done" then the second one also has "done", then the third, then the fourth... (so I can't target a specific nth child)
So Im looking for a way of targeting the last instance of "done" wherever that may be...
Sorry for not specifying this earlier. i wish I could add an additional class but for now I am unable to...
Provided the hierarchy doesn't change, this works for me:
.installSteps div:nth-child(2) :last-child {
color:red;
}
jsFiddle example
If the hierarchy will change, then you're probably going to have to use JavaScript as you can't target classes of elements with CSS pseudo-classes, only elements.
You could do this
.installSteps .done:not(:first-child) .text {
color: red;
}
Will affect anything after first one.
JS Fiddle Demo
Try nth-child() applied to the .done class.
Example
.done:nth-child(2) .text{
background:red;
}
DEMO
http://jsfiddle.net/a_incarnati/ntzj5wte/
This question already has answers here:
Select deepest child in jQuery
(7 answers)
Closed 7 years ago.
Is there a way to select the inner child (deepest) using css selectors. Se example below:
<div class='d1 view'>
<div class='d2 view'>
<div class='d3 view'></div>
</div>
<div class='d4 view'>
<div class='d5 view'>
<div class='d6 view'></div>
</div>
</div>
</div>
The d1-d6 classes is just for simplifying my question.
I now want to select d3 and d6.
Note the list of children can be infinite. So is there a way to select - using css selectors - the deepest child?
I made a JSFiddle using jQuery
Currently with CSS there is no way to select the deepest child of a parent element. You'll have to resort to jQuery to solve this.
There are a couple of questions that cover this already.