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>
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
Is it possible to select a specific <div> when another <div> which is not a parent is :hover?
All that in HTML5/CSS3 only, without JS.
<section>
<div id=first></div>
</section>
<section>
<div class=second></div>
</section>
As an example, i want <div class=second> to show when <div id=first> is :hover.
This is possible, but only if the two elements have the same parent.
Using the element1 ~ element2 selector. For example:
HTML:
<div class="first">
<!-- content -->
</div>
<span class="example-element"></span>
<div class="second">
<!-- content -->
</div>
CSS:
.first:hover ~ .second {
/* styles */
}
If you need to select an element that does not have the same parent, you need to use javascript.
this is two ways to achive that, with click adding an a tag or with hover that its a little tricky
.second{
display:none;
}
#second:target {
display:block;
}
#first a{
text-decoration:none;
color:black;
}
.disp1:hover + .disp2{
display:block;
}
.disp2{
display:none;
}
<section>
<div id="first"><a href="#second" >div one</a></div>
</section>
<section>
<div id="second" class="second">div two</div>
</section>
<div class="disp1">first div</div>
<div class="disp1 disp2">second div</div>
I have a nested HTML element structure where I need to apply css styles for some condition.
Apply styles to class starts with "a-" in the .a-comp element
Ignore styles to .a-col class and its child elements which have "a-*" class
The code below works for the above scenario. But it doesn't work for other child elements which have "a-*" class.
How can I achieve that?
.a-comp :not(.a-col) [class^="a-"],
.a-comp :not(.a-col) [class*="a-"] {
color: red;
}
<div class="a-comp">
<div class="a-one">
<div class="a-col">
<div class="a-text">
Text1
</div>
</div>
</div>
<div class="a-row">
<div class="a-text">
Text 2
</div>
</div>
</div>
View on JSFiddle
Your selector matches .a-* elements that have an .a-comp ancestor, with some intermediate element that is not .a-col. However, both of your examples match that selector.
The first one has .a-one as a descendant of .a-comp and ancestor of a-text. The second one has .a-row as a descendant of .a-comp and ancestor of a-text.
One solution might be to set the appropriate children of .a-col elements not to be red.
.a-comp [class^="a-"] {
color: red;
}
.a-comp .a-col [class^="a-"] {
color: black;
}
<div class="a-comp">
<div class="a-row">
<div class="a-two">
<div class="a-text">
In a ROW
</div>
</div>
</div>
<div class="a-one">
<div class="a-col">
<div class="a-text">
In a COL
</div>
</div>
</div>
<div class="a-row">
<div class="a-text">
In a ROW
</div>
</div>
<div class="a-one">
<div class="a-something">
<div class="a-text">
In something else
</div>
</div>
</div>
</div>
I have a parent DIV with 5 Child DIVs, each Child DIV has the same class and that appears to be the problem. I am trying to put a different background color for each child DIV? But something seems to be going wrong with the CSS. Thoughts?
CSS
.rsThumbsContainer:nth-child(2){
background: rgb(184,84,84);
}
HTML
<div class="rsThumbsContainer">
<div class="rsNavItem rsThumb">
<div class="rsTmb">Frugobee video</div>
</div>
<div class="rsNavItem rsThumb">
<div class="rsTmb">Post a job</div>
</div>
<div class="rsNavItem rsThumb">
<div class="rsTmb">Get a quote</div>
</div>
<div class="rsNavItem rsThumb">
<div class="rsTmb">Make a hire</div>
</div>
<div class="rsNavItem rsThumb">
<div class="rsTmb">Pay with ease</div>
</div>
</div>
Output:
I know it can be done using ID's and JQuery.
See example.
You need set :nth-child on
<div class="rsNavItem rsThumb">
JSFIDDLE DEMO
You need to apply nth-child to the child selector, not the parent:
.rsNavItem:nth-child(2) {
background: rgb(184,84,84);
}
I am experiencing an issue using the hover inside the orbit slider, it doesn't work at all.
What am I doing wrong?
Here is the code and the fiddle:
http://jsfiddle.net/Bonomi/KgndE/
HTML:
<div class="row">
<div class="large-12">
<ul data-orbit>
<li>
<img src="http://upload.wikimedia.org/wikipedia/commons/a/a7/Saturn-day-earth-smiled-1000x600.png" alt="slide 1"/>
<div class="orbit-caption">
Caption 1
</div>
</li>
</ul>
<div class="orbit-caption">
Caption 2
</div>
</div>
</div>
CSS:
.orbit-caption:hover {
background-color: red;
}
Thanks in advance
It's because your selector isn't specific enough. Try:
Updated Example
.row .large-12 .orbit-caption:hover {
background-color: red;
}
I'd suggest looking into CSS specifity (mdn).
You were using a selector with a specificity value of 20 whereas the selector you were trying to overwrite: .orbit-container .orbit-slides-container>* .orbit-caption had a specificity of ~ 30.
The selector .row .large-12 .orbit-caption:hover has a speciity of 40 (note the pseudo class)