Supoose you have something like
<div class="base">
<div>
...
<div class="ok">
<div>
...
<div class="ok"></div>
...
</div>
</div>
...
</div>
</div>
Here I've shown just a couple of DIVs, but it can be any level deep (note the ...)
So the question is: How can I style the first element with the class okwithout knowing how deep it is nested ?
Here is a DEMO in which you can see I style all the DIVs with the class ok
there is no selector for that, but there is override workaround:
you can apply some css to all .ok and then reset on all nested .ok
div {
margin: 5px;
padding: 5px;
border: 1px solid green;
background-color: #fff;
}
.ok {
background-color: gray;
}
.ok .ok{
background-color: #fff;
}
<div>
...
<div class="ok">
...
<div class="ok">
...
<div class="ok">
...
<div>
...
</div>
</div>
</div>
</div>
</div>
CSS provides no functionality to select an element based on anything that appears in the document after its start tag. Not descendants, not later siblings, and not later siblings of its ancestors.
You'd need to use JavaScript for this. Something along the lines of:
document.addEventListener("DOMContentLoaded", function(event) {
document.querySelector(".ok").classList.add("ok-first");
});
Related
i have 6 divs with the same css class, and want to add css on each div individually, without changing the css class (because there is a lot of code that gonna break if i change the classes) and also cant add any other on top of the current one. How do i select each div individually to add different css to each one?
<div class="c-transparencia-graficos__part"> ... </div>
<div class="c-transparencia-graficos__part"> ... </div>
<div class="c-transparencia-graficos__part"> ... </div>
<div class="c-transparencia-graficos__part"> ... </div>
<div class="c-transparencia-graficos__part"> ... </div>
<div class="c-transparencia-graficos__part"> ... </div>
for example i want to add on the first div a position absolute with top 0, but not on the other ones, and again, i cant add any css class or change the current ones.
Also (maybe this helps) inside the div there is some code that changes over the other divs, so maybe i can select a class using the childrens?
The problem with .c-transparencia-graficos__part .sample1 is that im changing te .sample1 class not the .c-tra... that im interested
There is any way?
Here you go...
Use :nth-child() CSS selector. Read more about it here.
See the snippet below.
.c-transparencia-graficos__part:nth-child(1) {
background-color: blue;
}
.c-transparencia-graficos__part:nth-child(2) {
background-color: red;
}
.c-transparencia-graficos__part:nth-child(3) {
background-color: purple;
}
.c-transparencia-graficos__part:nth-child(4) {
background-color: yellow;
}
.c-transparencia-graficos__part:nth-child(5) {
background-color: green;
}
.c-transparencia-graficos__part:nth-child(6) {
background-color: brown;
}
<div class="c-transparencia-graficos__part"> ... </div>
<div class="c-transparencia-graficos__part"> ... </div>
<div class="c-transparencia-graficos__part"> ... </div>
<div class="c-transparencia-graficos__part"> ... </div>
<div class="c-transparencia-graficos__part"> ... </div>
<div class="c-transparencia-graficos__part"> ... </div>
I want to add/remove a class to an element (child of the same div is being clicked) for example, if the user press the #first element: The first element should now have 2 classes: .block .active. and the should now look red, But every other should remain intact. I've try the following (code below) nonetheless after I click on one block all of the blocks change their state and now all of them have both classes: .block .active.
Since I have a lot of blocks, If possible I don't want to use id selectors, just detect and apply the desired classes on the same parent div.
css
.block p{
color: blue;
}
.block.active p{
color: red;
}
html
<div class="block" id="first">
<p> Element in blue </p>
</div>
<div class="block" id="second">
<p> Element in blue </p>
</div>
<div class="block" id="third">
<p> Element in blue </p>
</div>
jQuery
$(".block").click(function(){
$("block").closest( "block" ).toggleClass( "active" );
});
You were almost there. Instead of using .block & closest you can target the element being clicked with this.
In the below code, we are first removing the active class from all elements with class block and then applying the active class to the clicked element.
$(".block").click(function(){
$('.block').removeClass('active');
$(this).addClass( "active" );
});
.block p{
color: blue;
}
.block.active p{
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block" id="first">
<p> Element in blue </p>
</div>
<div class="block" id="second">
<p> Element in blue </p>
</div>
<div class="block" id="third">
<p> Element in blue </p>
</div>
$(".block").click(function(){
if ( $(this).hasClass('active')) {
$(this).removeClass('active')
} else {
$('.block').removeClass('active');
$(this).addClass('active');
}
});
.block p{
color: blue;
}
.block.active p{
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block" id="first">
<p> Element in blue </p>
</div>
<div class="block" id="second">
<p> Element in blue </p>
</div>
<div class="block" id="third">
<p> Element in blue </p>
</div>
$(".block").click(function(){
$(this).toggleClass("active");
});
This question already has answers here:
CSS negation pseudo-class :not() for parent/ancestor elements
(2 answers)
Closed 4 years ago.
Check this code below:
.aaa :not(.bbb) .ccc {
font-size: 20px;
color: #FF0000;
}
<div class="aaa">
<div>
<div>
<div class="bbb">
<div>
<div>
<div class="ccc">AQUI</div>
</div>
</div>
</div>
</div>
</div>
</div>
I want to match all .ccc element that are children of .aaa but are not children of .bbb. It means that the code above should NOT make the AQUI word be RED, but it gets RED anyway. What am I doing wrong?
There are actually elements which are not .bbb - the two divs before and after .bbb in this case. For this to work, you'll need to be more specific. You can add another class (zzz in the example), and if this class is not combined with .bbb the rule will be applied.
.aaa .zzz:not(.bbb) .ccc {
font-size: 20px;
color: #FF0000;
}
<div class="aaa">
<div>
<div>
<div class="zzz bbb">
<div>
<div>
<div class="ccc">AQUI</div>
</div>
</div>
</div>
</div>
</div>
</div>
The not(.bbb) will match any div without the class .bbb and you have a lot of them between .aaa and .ccc that why the text is red. To do what you want you need to consider two selectors
.aaa .ccc {
font-size: 20px;
color: #FF0000;
}
/*we reset the style if children of .bbb*/
.bbb .ccc {
color: initial;
font-size:initial;
}
<div class="aaa">
<div>
<div>
<div class="bbb">
<div>
<div>
<div class="ccc">AQUI</div>
</div>
</div>
</div>
</div>
</div>
</div>
You have overlooked that the .ccc is a child of components that match :not(.bbb):
<div class="aaa">
<div class="ccc"></div>
<div class="bbb">
<div> // <-- :not(.bbb)
<div class="ccc"></div>
</div>
</div>
</div>
You need to write two rules:
.aaa .ccc {
color: blue;
}
.aaa .bbb .ccc {
color: red;
}
Trying to select the 2nd 'column-left' by using only CSS, changing HTML is not an option. :nth-of-type(2) is selecting both of the div's
<div class="collection">
<div class="column-left">
</div>
<div class="column-left">
</div>
</div>
Use nth-child() selector to get the desired result
change your CSS to this:
.column-left:nth-child(2) {
color: red;
}
This link will explain the difference between nth-child selector and nth-of-type:
Link
Just use nth-child(n) instead of nth-of-type
.collection .column-left:nth-child(2) {
color: red;
}
<div class="collection">
<div class="column-left">
123
</div>
<div class="column-left">
456
</div>
</div>
I've seen both this and this question, but they're both Javascript-oriented.
I'm looking to select the only div which has no ID or Class.
Example:
<body>
<div class="X" ... />
<div class="Z" ... />
...
<div class="Y" ... />
<div>Select me</div>
<div id="footnote" ... /> <!-- Notice I have no class. -->
...
</body>
There will only ever be one div with no class and id.
The div may change places, or be not present.
No Javascript. However any language which can compile to CSS like SASS is fine.
The divs in question will only ever be directly under <body>.
I may not always know what classes or IDs there will be.
You can use the :not:
CSS:
div:not([class]):not([id]) {
height: 200px;
width: 200px;
background-color: red;
}
HTML:
<div></div>
<div class="shikaka"></div>
<div id="shikaka2"></div>
http://jsfiddle.net/qcq0qedj/
You can do:
body > div:not([class]):not([id]) { }
JSFiddle
Ah... the beauty of :not. (AKA - not:ugly)
div:not([class]):not([id]) {
color: #fff;
padding: 2px 4px;
background: red;
}
<body>
<div class="X">...</div>
<div>Select me</div>
<div class="Z">...</div>
<div class="Y">...</div>
<div>Select me, too!</div>
<div id="footnote">...</div>
</body>
http://jsfiddle.net/stevenventimiglia/53Lqekod/