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">
Related
I'm writing a test add-on (Firefox) just for learning. At some point it hides all elements but one. I want to do something a little more complicated. My intent is to hide everything but the <div id ="good"> and necessarily all its ancestor containers.
Here is the sample HTML I'm working on:
<section id="wrap">
<div>...</div>
<div>...</div>
<div id="good">...</div>
<a>...</a>
</section>
So I'm trying to add this CSS:
body > :not(#good) {
display: none;
}
and of course this is not working, it is hiding everything on the page, I think I need to leave wrap from being hidden, but even altering the code, it keeps hiding everything:
body > :not([name="wrap"])
You don't need to use a child selector(>) for this, instead it should look something like this:
section :not(#good) {
display: none;
}
or to target one specific section
#wrap :not(#good) {
display: none;
}
I am making a theme for a website, but I ran into a problem. I can't change their HTML or use javascript, only CSS.
This is what the site's HTML looks like:
<div class="container">
<div style="margin:a ridiculously massive number">
<p id="title"> Title of page </p>
<p> Words that cannot be read because of the ridiculous margin </p>
</div>
<div id="otherContent"> There a lot of divs without ridiculous margin all with different ids </div>
</div>
I want to remove the ridculous margin without affecting the other divs margins. Is this possible?
yes you can target the div that is the first-child inside of .container as to not effect other divs.
.container div:first-child{
//code
}
EXAMPLE 1
Example 1 is specifically for the example you posted where the div you would like to target is the first child of it's parent. Also note if the margin is inline like your example you're going to have to over-ride it with !important like so:
.container div:first-child{
margin: 0 !important;
}
OR
You could also use the :not selector if the other's have a similar class
.container div:not(.classname) {
//code
}
EXAMPLE 2
The point of example 2 is if your div isn't the first child and the only without a class (it would probably be unlikely you would have multiple divs with the same classname except one but it's possible). in your example you could also use :not() to target that other div with id #otherContent like so:
.container div:not(#otherContent) {
//code
}
OR
The last option you can use if the others don't apply would be nth-of-type() to target specifically which one you want to effect:
.container div:nth-of-type(2) {
//code
}
EXAMPLE 3
In this case you will have to use first-child selector with !important keyword, as this is the only way to make rule more specific than style="margin" rule:
.container > div:first-child {
margin: 0 !important;
}
If all the other divs have ID you can use the following:
div>div:not([id]) {
margin: 0 !important;
}
Here is my code.
<div class="start">start</div>
<div>middle-1</div>
<div>middle-2</div>
<div>middle-3</div>
...................
...................
<div>middle-n</div>
<div class="end">end</div>
I want to apply css to all div's when mouse hover the first div with class start.
With the current HTML structure you can use couple of sibling selectors for this.
.start:hover ~ div {
color: red; /* styles you want to apply */
}
/* reset styles back for all other divs after .end */
.start:hover ~ .end ~ div {
color: inherit;
}
Demo: http://jsfiddle.net/3c6V6/1/
However I would recommend to change HTML structure if you can. For example:
<div class="start">start</div>
<div class="middles">
<div>middle-1</div>
<div>middle-2</div>
<div>middle-3</div>
<div>middle-n</div>
<div class="end">end</div>
</div>
<div>after-1</div>
<div>after-2</div>
and CSS:
.start:hover + .middles > div {
color: red;
}
You would just have much more flexibility.
Demo: http://jsfiddle.net/3c6V6/2/
Could it be as simple as putting a parent container around it, and putting the hover on that, or do you wish to single out some of the siblings directly?
In this case, try putting :hover on the parent container like this:
.parent:hover div {/*style*/}
This is for your second version found in the comments: JSFiddle DEMO
div.start:hover~div.middles div:not(.end) {
font-weight: bold;
}
(This is for your original question):
div.start:hover~div:not(.end) {
font-weight: bold;
}
JSFiddle DEMO
This is where I found the information to do it. Didn't know there were so many CSS selectors.
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/
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.