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>
Related
Please see the following html code:
<div class="container">
<div class="sidebar-column">
<h2 class="title">Column 01</h2>
<p>content01</p>
<p>content02</p>
<p>content03</p>
</div>
<div class="sidebar-column">
<h2 class="title">Column 02</h2>
<p>content04</p>
<p>content05</p>
<p>content06</p>
</div>
</div>
I'd like to select only the second title with content "Column 02" is there anyway to do that using only CSS?
I've tried many way including select the headline "h2" of the second child class "sidebar-column" but doesn't work:
<style>
div.sidebar-column:nth-child(2) > h2.title {
background-color: red;
}
</style>
After adding style "background-color: red", the second "h2" is supposed to change background color to red, but nothing happen.
and idea? Thanks!
Edit: I've found out how to fix the issue. Just remove the ">". The css now become:
<style>
div.sidebar-column:nth-child(2) h2.title {
background-color: red;
}
</style>
Now it's worked in Wordpress addition CSS. But I still don't know why.
There are 2 ways of doing it.
SOLUTION 1- make one more css class (eg-class2) and add both the classes to the second h2 element.
<div class="container">
<div class="sidebar-column">
<h2 class="title">Column 01</h2>
<p>content01</p>
<p>content02</p>
<p>content03</p>
</div>
<div class="sidebar-column">
<h2 class="title class2">Column 02</h2>
<p>content04</p>
<p>content05</p>
<p>content06</p>
</div>
</div>
The second class will contain the code-
<style>
.class2{
background-color: red;
}
</style>
SOLUTION 2- Or if you just want to add red background color to Column 02,you can write the inline CSS code
<div class="container">
<div class="sidebar-column">
<h2 class="title">Column 01</h2>
<p>content01</p>
<p>content02</p>
<p>content03</p>
</div>
<div class="sidebar-column">
<h2 class="title" style="background-color:red;">Column 02</h2>
<p>content04</p>
<p>content05</p>
<p>content06</p>
</div>
</div>
Best way is just add an data-attribute to your template and select with that data-attribute in css.
working http://jsfiddle.net/Ls8EP/65/ link
What actually happens: I have a div in a file there is HTML code, which added Dynamically from BackEnd, CSS Classes(which included from Dynamic code) uses CSS from my style.css
What I need: My own CSS should not impact on dynamically added code.
Similar Solution: iframe is a solution but I want to do same using div tag.
I think this is:
<div class="row" style="all:initial"> do some thing</div>
Better you can write you css with parent-child combination to avoid such issues as like below snippet. Here newly added <p> tag has same class .content but parent has different class name as .dynamic from .static.
jQuery(document).ready(function() {
jQuery('.dynamic').html(jQuery(".static").html());
});
.static .content {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="static">
<p class="content">Some content goes here</p>
</div>
<div class="dynamic">
</div>
Three options from my perspective:
1. Use unique classnames
2. Unique ID
If only classes are added, give the parent div an ID and overwrite the css by using the ID.
<div id="uniqueStyle" class="dynamicDiv">
<div class="row clearfix"></div>
<div class="row clearfix"></div>
<div class="row clearfix"></div>
<div class="row clearfix"></div>
</div>
#uniqueStyle{
background: red; //overwrite
}
#uniqueStyle .row{
background: blue; //overwrite
}
3. Using :not
Give the div an unique ID and use the :not selector to exclude it from styling.
<div id="noStyling" class="dynamicDiv">
<div class="row clearfix"></div>
<div class="row clearfix"></div>
<div class="row clearfix"></div>
<div class="row clearfix"></div>
</div>
:not(#noStyling){
background: blue; //set styling of all elements except #noStyling
}
More info about :not selector: https://www.w3schools.com/cssref/sel_not.asp
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");
});
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/