I'm trying to set the background color of the first div with the class offer. I thought .offer:first-child would do the trick, but that isn't working.
I've also tried using :nth-child(1), but that's not working either.
Any suggestions is greatly appreciated.
My fiddle: http://jsfiddle.net/MNQar/
CSS
.offer:first-child { background-color: indianred; }
.special-offers .title,
.special-offers .offer,
.special-offers .more {
height: 200px;
}
[class*="column"] {
display: inline;
float: left;
margin: 0;
}
.column2 { width: 190px;}
.column3 { width: 285px;}
HTML
<div class="row row-spacer special-offers">
<div class="column2 title">
<h2>Offers</h2>
</div>
<div class="column3 offer padding">
<div class="date">10. June</div>
<h3>Høyer tømmer lageret!</h3>
</div>
<div class="column3 offer padding">
<div class="date">10. June</div>
<h3>Super salg hos Vivikes</h3>
</div>
<div class="column1 more">
<div class="caret"></div>
More offers
</div>
</div>
.offer:first-child means "An element With the class 'offer' that is the first child beneath its parent", not "the first child with class 'offer'".
I believe you have to re-think how you do this. For example, stick a separate class to the first child or something, then use a selector like .offer.highlight.
CSS Only
This should work:
.offer { background-color: #ccc; }
.offer ~ .offer {background-color: transparent; }
It first sets all .offer elements to have a background color, then uses the sibling selector (~) to undo it for all subsequent .offer elements. Kind of a hack but it should be okay if you're not willing to use javascript. See here for a much more complete explanation: CSS selector for first element with class
And here's a fiddle: http://jsfiddle.net/MNQar/4/
JS
Alternatively, this is really easy to do with Javascript: $(".offer").eq(0).css("background-color","#ccc");
Fiddle: http://jsfiddle.net/MNQar/6/
The problem is that there is a div that precedes the first offer, making it the second element, not the first. The best solution is to give the first offer a different class, offer-first and use that. If that's not possible and the first offer is always the second child, you can use :nth-child(2)
Using :nth-child(2)
http://jsfiddle.net/MNQar/3/
Related
This question already has an answer here:
Why doesn't nth-of-type/nth-child work on nested elements?
(1 answer)
Closed 10 months ago.
I've got this structure in my HTML and I'm trying to apply some css to the last element of class target but I can't figure out how to do it or if it is possible. It seems like when I try things like :last-child or :last-of-type it just applies the css to all of the target elements since it considers them to be the only element.
<div className="parent">
<div>
<div className="target"></div>
</div>
<div>
<div className="target"></div>
</div>
<div>
<div className="target"></div>
</div>
</div>
If you want to apply the CSS last-child then you can try this code:
You can add the class for every div
.parent div:nth-last-child(1) .target{
background: #000000;
color: #fff;
}
Try something like that
.parent > div {
width: 50px;
height: 50px;
border: solid 2px black;
background-color: red
}
.parent div:last-child {
background-color: blue
}
Maybe I figured out what’s happened with your code. Writing .target:last-child you select any div element with .target class that is the last child of another element. Your CSS code is applied to every .target element because each of them are nested in a separated div, so every .target div is the last (and unique) child of each div within is nested.
So To do what you want, try this HTML:
<div class="parent">
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
and this CSS:
.target {
width: 100px;
height: 100px;
background-color: red;
margin-top: 50px;
}
.target:last-child {
background-color: blue;
}
Be aware that if you will have another div with .parent class which contains element with .target class in your project, this CSS will be apllied also to these others code. If you try to copy and past your HTML more times you'll be able to see what I'm talking about.
I hope I have been helpful!
This is my code:
.fontmenu .fontlist{
position: absolute;
bottom:30px;
display:none;
}
.fontbutton button:hover .fontmenu .fontlist{
display:block;
}
<div class="fontmenu">
<div class="fontbutton">
<button>fonts</button>
</div>
<div class="fontlist">
<div onclick="font(1)">Arial</div>
<div onclick="font(2)">Courier</div>
<div onclick="font(3)">Verdana</div>
<div onclick="font(4)">sans</div>
</div>
</div>
The CSS is not working. The list is not visible when I hover the button. I want to know whether the .fontbutton button:hover .fontmenu .fontlist{} is valid or not.
This is what you have used:
.fontbutton button:hover .fontmenu .fontlist{ }
This won't work
Why it won't work? Read on. I will explain. But first, lets see what will work.
Lets try using some selectors:
.fontbutton:hover + .fontlist {}
This WILL work
Let's see it in action:
.fontmenu .fontlist {
bottom: 30px;
display: none;
}
.fontbutton:hover + .fontlist {
display: block;
}
/* No need to include the wrapper fontmenu div,
just target the siblings, ie, fontbutton and fontlist.
The + selector must be used, otherwise, the browser will
think fontlist is the child of fontbutton */
<div class="fontmenu">
<div class="fontbutton">
<button>fonts</button>
</div>
<div class="fontlist">
<div onclick="font(1)">Arial</div>
<div onclick="font(2)">Courier</div>
<div onclick="font(3)">Verdana</div>
<div onclick="font(4)">sans</div>
</div>
</div>
Notice that the list becomes visible even if we hover to the right of the button. This is happening since we are targeting the div fontbutton and not the <button> element. So, the browser makes the list visible when we hover the div and not the button.
How to fix?
We need to change the html a little.
.fontmenu .fontlist {
display: none;
}
button:hover + .fontlist {
display: block;
}
<div class="fontmenu">
<button>fonts</button>
<div class="fontlist">
<div onclick="font(1)">Arial</div>
<div onclick="font(2)">Courier</div>
<div onclick="font(3)">Verdana</div>
<div onclick="font(4)">sans</div>
</div>
</div>
Look that I removed the .fontbutton class and made the <button> a sibling of .fontlist. So, now, you can see that the list is visible only when we hover the button.
Now you would say I could just add some selectors to your css. But I didn't because there's no way you could target <button> and then move down to .fontlist which is in a separate div.
.fontbutton > button:hover ? .fontmenu > .fontlist{ }
We will have a problem at the place of ?.
First, we need to go down to .button.
Move up to .fontbutton.
Add a + selector and switch to .fontmenu.
Move down to .fontlist.
After we move down to .button, we can't go up again to .fontbutton.
CSS doesn't have something like parent selector.
So, clearly, we can't use it that way.
I need to remove strings that do not have an html tag.
For example :
<div class="A">
keep this and i want to remove this
</div>
Can I do this using only css ?
Maybe you can use font-size ::
.A {
font-size: 0;
}
.A a {
font-size: 20px;
}
<div class="A">
keep this and i want to remove this
</div>
You could use visibility:
.A {
visibility: hidden;
}
.A a {
visibility: visible;
}
<div class="A">
keep this and i want to remove this
</div>
NOTE - of course this DOES NOT remove the string / element in question from the DOM itself, it merely hides it but achieves the same purpose.
Set the style inside of class "A" to be blank by default. Set up a secondary class to handle ".A a". This will allow you to have two different styles. One for anchored, one for not.
.A { color: rgba(0, 0, 0, 0.5); } //Set this to transparent
.A a { color: #000 }
Something like that.
You can also use display: none with the :not() pseudo-selector
.A :not(a) {
display: none;
}
EDIT: This does not work
Neither does this:
.A {
display:none
}
.A a {
display: inline!important;
}
You can not do this with pure css. If you cannot change the markup, then you will need to use JS to grab the content you want to keep and remove the rest.
If you have any control over the markup you should really consider using different markup. You could have an alternate element that is initially hidden.
<div class="A">
keep this and i want to remove this
</div>
<div class="A hidden">
keep this
</div>
you could also enclose the other content you want to remove in a span tag and give it a class that you can reference later.
<div class="A">
keep this <span class="bad-stuff">and i want to remove this</span>
</div>
I'm supposed to be removing images of graffiti off of a wall. The exercise is supposed to help teach me how to use selectors in different ways. The tricky bit is that I am competing with a second style sheet and I am trying to make a new style sheet to remove the images of graffiti.
This is the relevant code I am working with:
<div id="wall">
<div class="parent">
<div></div>
<div>
<div id="tag-6"></div>
</div>
</div>
So what I need to do is select
<div id="tag-6"></div>
I understand that I am selecting a great grandchild of <div id="wall"> I even understand that it is not the first child but everything I have tried so far does not work.
This is what my CSS looks like:
#wall .parent > div > div {
display: none;
}
I also looked up the solution to this problem and it looked like this:
body div#wall div.parent div:last-child div#tag-6 {
display: none;
}
Yet when I copied and pasted this CSS code into my stylesheet, it did not work. Can anyone help me out?
if it has an ID, you don't need any combined selectors, just use #tag-6 as a selector
#tag-6 { display: none; }
Addition after edit of question:
Just make sure your own stylesheet is referenced after the stylesheet whose styles you want to overrule.
Try:
#wall .parent > div #tag-6 {
display: none;
}
The most obvious method is the direct route:
#tag-6 {
display: none;
}
You have a typo
<div id="wall>
should be
<div id="wall">
Our problem is like this.
We have piece of code like this.
<div class="parent">
<div class="child">
Item 1
</div>
<div class="child">
Item 2
</div>
<div class="child">
Item 3
</div>
<div class="child">
Item 4
</div>
<div class="clear">
</div>
</div>
This is all in global container with class .content.
CSS code:
.content a
{
font-size: 11px;
}
.parent a
{
font-size: 16px;
}
For some reason, instead of applying .parent a, browsers are applying .content a.
What is wrong and how come container CSS is applied instead of closer .parent a CSS?
Both rules have the same specificity, so whichever rule comes last in the style declarations will win... Are you sure that the .parent a-rule is specified after the .content a-rule?
Another way to solve it would be to increase the specificity slightly, i.e:
.parent .child_item {
font-size: 16px;
}
Edit: You can play around with your test case here: http://jsfiddle.net/gburw/
To prove my point, try switching the CSS-declarations and you will see that whichever rule is defined last will "win".
Edit 2: You can read more about CSS specificity here. It's a pretty simple concept to grasp, the hard part is avoiding specificity wars with fellow developers =) So you should come up with a standard way you write CSS in your company. Following the guidelines of Pagespeed and YSlow is also always a good idea.
Or if you really want .parent a to be applied. You can do this:
.parent a{
font-size:16px !important;
}
that will give it more weight than .content a regardless of which was declared last.
Sounds like an issue of CSS Specificity. Check to make sure that your CSS selectors are actually:
.content a
{
font-size: 11px;
}
.parent a
{
font-size: 16px;
}
and not someting like #container .content a. You could also increase the specificity of .parent a to .parent .child a if that's not the case.