I need to be able to apply a width to a div but only if any of it's parents have a class of grid.
Obviously the child selector allows me to select an element if it's a direct child of the grid div:
.grid > .test {
width: 300px;
}
<div class="grid">
<div class="test"></div>
</div>
I need a selector that allows me to select the .test div even if its not the direct child of grid:
<div class="grid">
<div class="another">
<div class="test"></div>
</div>
</div>
You'd imagine that I could just use a bog-standard selector like:
.grid .test
Problem with this is that I only want to match the first instance of the .test div. The above selector matches all instances even if they're nested. Any subsequent div's with a class of test should be ignored.
<div class="grid">
<div class="another">
<div class="test">
<div class="test"></div> <!-- this should be ignored somehow -->
</div>
</div>
</div>
http://jsfiddle.net/hs3G9/1/
Is there any way to do this with css or do I need to resort to JS?
There isn’t a way of excluding that inner .test element without JavaScript. If the two had been siblings, you could do something like:
.grid .test:first-of-type {}
edit: Right you are; you can cook something up with the :not selector.
Using the :first-child selector in css should work.
So for you case:
<style>
.grid .test:first-child {
background-color: rgba(0,0,0,.2);
}
</style>
<div class="grid">
<div class="another">
<div class="test">
<div class="test"></div> <!-- this should be ignored somehow -->
</div>
</div>
</div>
Related
I have layout that is generated dynamically so order of elements could change. Each element that is part of this layout has its own different class. I want to be able to select element of certain class but only if it is last child of its parent to apply styling. If element with different class is last child of its parent, it should not be selected. Is it possible to have this kind of scss selector and achieve this functionality without using javascript?
Example:
<div class="parent">
<div class="child1">Hello!</div>
<div class="child2">Hello!</div>
<div class="child3">Hello!</div>
</div>
I want to select element with class child3 only if it is last child of div with class parent.
So if child2 class element is last child of div class parent it is not selected, for example here:
<div class="parent">
<div class="child1">Hello!</div>
<div class="child3">Hello!</div>
<div class="child2">Hello!</div>
</div>
Yes, and this is the normal CSS behaviour. You can do something like this:
.parent .child3:last-child {}
This is a rule that selects:
a .child3 element inside .parent.
.child3 element comes as the last, there's no other elements after that including text.
For SCSS, you can do something like this:
.parent {
.child3 {
&:last-child {
// Rules.
}
}
}
Example Snippet
.parent .child3:last-child {
background: #ccf;
}
<strong>Trial 1</strong>
<div class="parent">
<div class="child1">Hello!</div>
<div class="child2">Hello!</div>
<div class="child3">Hello!</div>
</div>
<hr />
<strong>Trial 2</strong>
<div class="parent">
<div class="child1">Hello!</div>
<div class="child3">Hello!</div>
<div class="child2">Hello!</div>
</div>
Preview
You can select elements by their attributes, so something like this would achieve your goal.
.parent div {
width: 50px;
height: 50px;
background-color: blue;
border: solid 1px black;
}
.parent div:last-of-type[class="child3"] {
background-color: red;
}
<div class="parent">
<div class="child1">Hello!</div>
<div class="child3">Hello!</div>
<div class="child2">Hello!</div>
</div>
<div class="parent">
<div class="child1">Hello!</div>
<div class="child2">Hello!</div>
<div class="child3">Hello!</div>
</div>
https://www.w3schools.com/cssref/css_selectors.asp
How can I write a CSS Rule that selects all div.box that are not inside .container?
The following snippet is not working because there is a div without .container inside the div.container.
div:not(.container) .box {
background:red;
}
<div class="box">box</div> <!-- select this -->
<div class="container">
<div>txt</div>
<div><div class="box">box</div></div>
</div>
<div class="box">box</div> <!-- select this -->
If you do not want to override every attribute, the only way I see is to give an additional class to the boxes inside of the specific container.
.box:not(.exclude) {
background: red;
}
<div class="box">box</div> <!-- select this -->
<div class="container">
<div>txt</div>
<div><div class="box exclude">box</div></div>
</div>
<div class="box">box</div> <!-- select this -->
In a way, the CSS rule you are asking for is sort of backwards. You should start with the most generic rules, and then add more specific ones. In your case, you should do something like the following:
/* Generic Box styles */
.box
{
border: 1px solid black;
}
/* Boxes in a container */
.container .box
{
color: blue;
}
<div class="box">Generic Box</div>
<div class="container">
<div class="box">I'm in a container</div>
</div>
Select all div.box or all div not inside .container? What you ask for and what you say you want selected in the html code sample are not the same thing. That said, your css selectors are just out of order. Try:
div.box:not(.container) {
background:red;
}
and
<div class="box">box</div>
<div class="container">
<div>txt</div>
<div><div class="box">box</div></div>
</div>
<div class="box">box</div>
If you want all the divs, just remove the .box
I want to use css3 nth-child to select matched elements based in their index in the whole document (like jquery :eq() selector) not based in the parent element.
<div id="container">
<div class="result">
<div class="active">content 1</div>
</div>
<div class="result">
<div class="active">content 2</div>
</div>
<div class="result">
<div class="active">content 2</div>
</div>
</div>
This css code select all elements because every .active is 1st child respective to the parent .result
.active:nth-child(1) {
background: red;
}
I tried also to make the body as parent
body > .active:nth-child(1) {
background: red;
}
But it can't do the job.
I want nth-child(1) selects content 1
and nth-child(2) selects content 2
I think you want to use nth-child on .result.
#container .result:nth-child(1) .active {
background: red;
}
JSBin
I have a structure like this:
<div class="parent">
<div class="child-1"></div>
<div class="child-2"></div>
<div class="child-3"></div>
<div class="child-4"></div>
<div class="child-5"></div>
</div>
I want to target .child-4 only when .child-2 is not a child of the same parent, without knowing the order of children, but the .child-2 would never come after .child-4.
The classic CSS approach to such problems is to write a general case, then a more specialized case, where in this situation you would override the general case:
/* case where there may or may not be a preceding child-2 */
.child-4 { color: red; }
/* case where there IS a preceding child-2 */
.child-2 ~ .child-4 { color: inherit; }
<div class="parent">
<div class="child-1">child1</div>
<div class="child-2">child2</div>
<div class="child-3">child3</div>
<div class="child-4">child4</div>
<div class="child-5">child5</div>
</div>
<br/>
<div class="parent">
<div class="child-1">child1</div>
<div class="child-3">child3</div>
<div class="child-4">child4</div>
<div class="child-5">child5</div>
</div>
This uses the general sibling combinator, represented by a tilde (~).
I have a question related to Select first Descendant with CSS or How do I hide only the first element of a type? but my case doesn't match these ones.
I need to target all .page descendants of class .example but excluding nested .example.
In this example, I'd like to target only #h1-a and #h1-c:
<div class="page">
<!-- there could be many levels of wrapping -->
<div>
<div>
<div id="h1-a" class="example">
<h1>h1-a</h1>
<div>
<div id="h1-b" class="example">
<h1>h1-b (nested)</h1>
</div>
</div>
</div>
</div>
</div>
<!-- or there could be none -->
<div id="h1-c" class="example">
<h1>h1-c</h1>
<div>
<div id="h1-d" class="example">
<h1>h1-d (nested)</h1>
</div>
</div>
</div>
</div>
Here is a jsfiddle to get us started.
You can use the CSS cascade to overwrite an earlier rule (applying to a more general context) with a later rule (applying to a more specific context):
.page .example {
border: 1px solid rgb(127,127,127);
}
.page .example .example {
border: none;
}
This is exactly how the CSS cascade is supposed to work - general rules higher up, specific exceptions lower down.