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)
Related
This question already has answers here:
:first-child not working as expected
(5 answers)
Closed 5 years ago.
Consider the following code:
<h2>
Working example
</h2>
<div class="test">
<button>FirstChild (Yellow)</button>
<button>Middle</button>
<button>Middle</button>
<button>LastChild (Red)</button>
</div>
<div class="test">
<h2>
Not working example - no DIVs
</h2>
<button>FirstChild (Yellow)</button>
<button>Middle</button>
<button>Middle</button>
<button>LastChild (Red)</button>
</div>
<div class="test">
<h2>
Not working example - Divs
</h2>
<div>
<button>FirstChild (Yellow)</button>
</div>
<div>
<button>Middle</button>
</div>
<div>
<button>Middle</button>
</div>
<div>
<button>LastChild (Red)</button>
</div>
</div>
And the following CSS:
.test button:first-child {
background: yellow;
}
.test button:last-child {
background: red;
}
.test button:not(:last-child):not(:first-child) {
background: cyan;
}
The result:
Why my CSS if not finding the child button element if it is inside a div or has another element (h2) in the middle ? There are no other button elements in the test div.
How to make this CSS consider the 3 given situations with the correct behaviour (Working example) ?
JSFiddle here
.test button:first-child this works on 1st one but failed on 2nd since first child of .test is h2 not button
SOLUTION:
Order matters in CSS so first set all button under .test to green, then set first/last to their color.
You should use first-of-type and last-of-type to target first of type (button or div) in siblings, or last in siblings, if you not sure about siblings, you should really read this:
Adjacent sibling selectors
https://developer.mozilla.org/en/docs/Web/CSS/Adjacent_sibling_selectors
.test button {
background: green;
}
.test > button:first-of-type,
.test div:first-of-type button {
background: yellow;
}
.test > button:last-of-type,
.test div:last-of-type button {
background: red;
}
<h2>
Working example
</h2>
<div class="test">
<button>FirstChild (Yellow)</button>
<button>Middle</button>
<button>Middle</button>
<button>LastChild (Red)</button>
</div>
<div class="test">
<h2>
Not working example - no DIVs
</h2>
<button>FirstChild (Yellow)</button>
<button>Middle</button>
<button>Middle</button>
<button>LastChild (Red)</button>
</div>
<div class="test">
<h2>
Not working example - Divs
</h2>
<div>
<button>FirstChild (Yellow)</button>
</div>
<div>
<button>Middle</button>
</div>
<div>
<button>Middle</button>
</div>
<div>
<button>LastChild (Red)</button>
</div>
</div>
Apparently you are mistaking what :last-child and the rest means and how it works. It is not the content of the button but the last element in a group of child elements. Your usage is incorrect.
You can try .test div:last-child button {color:red;} as an example.
Find the child element
.test button:first-child or .test button:nth-child(1)
.test button:nth-child(2)
.test button:nth-child(3)
.test button:last-child or .test button:nth-child(4)
This question already has answers here:
CSS 3 nth of type restricted to class [duplicate]
(2 answers)
Closed 5 years ago.
<div class="test">
<div class="test1"></div>
<div class="test2"></div>
<div class="test3"></div>
</div>
why
.test3:nth-of-type(3) {height: 100px;background: black;}
work, but
.test3:nth-of-type(1) {height: 100px;background: black;}
not? Is nth-type-of work same as nth-child in this case?
The nth-of-type pseudo selector is certainly working here as expected.
From MDN:
The :nth-of-type(an+b) CSS pseudo-class matches an element that has
an+b-1 siblings with the same element name before it in the document
tree
So
.test3:nth-of-type(3) {height: 100px;background: black;}
'works' because the div with class test3 also happens to be the third div within the container (div with class test)
however
.test3:nth-of-type(1) {height: 100px;background: black;}
doesn't select the test3 div because it isn't the first div in the container
Is nth-of-type work same as nth-child in this case?
In this case they are the same because all of the children in the container are divs.
In general, it could help to think about pseudo classes as a filter which matches only a subset of the matched selector (ie the part of the selector before the colon) when it is in the state that the pseudo class describes.
So for example .test:hover means: select all elements with class test - but only the ones which are being hovered.
Similarly here with nth-of-type: .test3:nth-of-type(3) means:
Select all elements with class test3, but only if it's the 3rd of that kind of element within it's container.
So take the following demo:
.test:nth-of-type(3) {
color:red;
}
<div>
<ul>
<li class="test">li 1</li>
<li class="test">li 2</li>
<li class="test">li 3</li>
<li class="test">li 4</li>
<li class="test">li 5</li>
</ul>
<span class="test">span 1</span>
<span class="test">span 2</span>
<span class="test">span 3</span>
<span class="test">span 4</span>
<span class="test">span 5</span>
</div>
Notice that both the third list item and the third span are styled - that's because both have class test and are the third of that kind of element within their container
NB:
When using an nth-of-type pseudo class without limiting it with a type selector - all types will match - as if the universal selector was used.
So for example:
.test:nth-of-type(3) is equivalent to *.test:nth-of-type(3)
Demo:
.test:nth-of-type(3) {
color:red;
}
<div>
<fred class="test">fred 1</fred>
<div class="test">div 1</div>
<span class="test">span 1</span>
<p class="test">p 1</p>
<p class="test">p 2</p>
<p class="test">p 3</p>
<p class="test">p 4</p>
<span class="test">span 2</span>
<fred class="test">fred 2</fred>
<fred class="test">fred 3</fred>
<span class="test">span 3</span>
</div>
You use .test3 in your selectors, but a class .test3 does only occure one time in your markup. So there are no other elements of .test3.
You can use .test > div to access your direct child divs.
Also, the pattern for nth-of-type is :nth-of-type( <an-plus-b> ). So you can just use
.test > div:nth-of-type(2n+1) { ... } /* or */
.test > div:nth-of-type(odd) { ... }
to get the first and the third (every odd) element.
.test>div {
margin: 10px;
padding: 10px;
}
.test > div:nth-of-type(2n+1) {
height: 100px;
background: black;
color: white;
}
<div class="test">
<div class="test1">1</div>
<div class="test2">2</div>
<div class="test3">3</div>
</div>
You can also just access the single child you need with .test > div:nth-of-type(1):
.test>div {
margin: 10px;
padding: 10px;
}
.test > div:nth-of-type(1) {
height: 100px;
background: black;
color: white;
}
<div class="test">
<div class="test1">1</div>
<div class="test2">2</div>
<div class="test3">3</div>
</div>
See more information about nth-of-type on MDN.
.test3:nth-of-type(1) {height: 100px;background: black;}
is not working because the type refers to div and since you have no first child element as div with a class of test3 the css is not applied to it.
If your markup was written like in the example below that selector would work but the selector
.test3:nth-of-type(3) {height: 100px;background: black;}
would not because there is no 3rd element of the type div and class test3
Maybe you'll figure of the importance of the type word in this selector by adding some elements of another type before the first div like in the example below
.test3:nth-of-type(1) {height: 100px;background: black; color: #fff;}
<div class="test">
<p class="paragraph">1st eleement of paragraph type</p>
<div class="test3">1st element of div type</div>
<div class="test2">2nd element of div type</div>
<div class="test1">3rd element of div type</div>
</div>
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>
Using the nth-of-type selector in CSS doesn't work for me. It applies the style of the first child to the rest of its siblings. So what happens is all the home-navigation-item divs are all colored aqua.
.home-navigation-item:nth-of-type(1) {
background-color: aqua;
}
.home-navigation-item:nth-of-type(2) {
background-color: red;
}
<div class="home-navigation">
<a href="news.html">
<div class="home-navigation-item">NEWS</div>
</a>
<a href="announcements.html">
<div class="home-navigation-item">ANNOUNCEMENTS</div>
</a>
<a href="events.html">
<div class="home-navigation-item">SCHEDULE OF EVENTS</div>
</a>
</div>
It's not working because it has multiple parent. nth-of-type works direct siblings not their parent and then siblings. So it's better to target their siblings parents and then elements. Read This
.home-navigation a:nth-of-type(1) .home-navigation-item{
background-color: aqua;
}
.home-navigation a:nth-of-type(2) .home-navigation-item{
background-color:red;
}
<div class="home-navigation">
<div class="home-navigation-item"> NEWS </div>
<div class="home-navigation-item"> ANNOUNCEMENTS </div>
<div class="home-navigation-item"> SCHEDULE OF EVENTS</div>
</div>
I want to add some css rules to .container.picture but only in .medium-width.
HTML is:
<div class="block medium-width">
<div class="container picture">
<img src="img/car4.png" title="Car">
</div>
<div class="container text">
</div>
</div>
CSS is:
.medium-width > .container.picture
{
width: 50%;
float: left;
}
Is something wrong in this selector?
No.
You may have other rules applied, or a context that prevent this selector from working.
But here, selector's right