I thought I knew this. There's three divs (.service-box) inside one wrapper div (.p-div)
How do you target the first (or any.) of the three inner divs?
This works, shows the structure is correct, will remove all inner divs.
div.p-div > div.service-box { display: none!important;}
I just can't target the first inner div.
I've tried first-child, nth-of-type(1), nth-child(1)
I did notice nth-of-type(1n) removes all inner divs like the first CSS line. While nth-of-type(2n) removes all but the 2nd inner div. Basically doing the opposite of what I would expect (apply display:none only to the 2nd div, leaving the others intact)
Gotta say I'm a little perplexed. Could just edit the HTML directly but.I thought we were past that you know?
.p-div > .service-box:first-of-type {
background-color: red;
}
Get a child of .p-div that has class .service-box and then select only the first child.
.p-div could be anything: some-selector > .service-box:first-of-type
CodePen: http://codepen.io/theblindprophet/pen/JKpwLk
Related
I have multiple parent divs that each contain multiple child spans. Only a select one of these spans do I want to hide upon hovering of the parent div. Currently, I am grabbing all of the parent divs like this:
div[id*=timeline_record_container]
Each of these parent divs contains the string timeline_record_container followed by a unique and dynamic ID. Then I am doing something similar with it's children:
span[id*=timeline_record_default_icons]
Where they all have the string timeline_record_default_icons followed by a unique/dynamic ID as well. Adding both of these selectors together and the hover event gives me something like this:
div[id*=timeline_record_container]:hover > span[id*=timeline_record_default_icons] {
display: none;
}
My thought here is on hover of timeline_record_container divs, find the timeline_record_default_icons one and set it to display: none. However this isn't working, am I ordering these wrong?
Edit: I added the HTML. The highlighted span is what I want to hide inside of the top level div in the image.
In your screenshot, the span you're targeting to hide is not an immediate child of div[id*=timeline_record_container].
Consider the following snippet:
<div class="parent">
<div class="brat">
<span class="target">The target</span>
<div>
</div>
In the above snippet, to access target, you could write:
.parent .target {
…
}
But not:
.parent > .target {
…
}
You could access .brat as an immediate child, because it lives on the first nesting level below the .parent node.
.parent > .brat {
…
}
So, back to your example. I think simply removing the > symbol before the span should do the trick.
div[id*=timeline_record_container]:hover span[id*=timeline_record_default_icons] {
display: none;
}
I have the following styles defined for two divs inside a containing div. I want to float the first inner div left and the second inner div right. I also want to make them margin left or margin right respectively by 15px. The problem is I want to keep my 'float left/float right' styles clean of the margin specification.
I want to be able to specify the class and add to it like so:
#termsPageButtonContainerCheckbox.leftAlignedControl {
margin-left: 15px;
}
The problem is, the margin-left will only be respected when i place it in the float style:
.leftAlignedControl {
float: left;
}
Here is a demo i set up on JSFiddle: [Removed by OP]
You are not targeting the id correctly. You either need to change the HTML id to termsPageButtonContainerCheckbox or change the CSS to #termsPageForm:termsPageButtonContainerCheckbox
http://jsfiddle.net/c5or4hjg/1/
The button has 2 ID's, but only its only possible to give it one id and its not possible to use : in an id for as fas as i know. So it will work if you remove one of the 2 parts used (the one before or after :)
I've been playing around with CSS and using the > operator to select child elements on hover.
I'm trying to hide two divs while hovering over another. However I am not sure how to select an external div? I've got this so far:
http://jsfiddle.net/s3rdqwuq/
.shares:hover>.catlink {
display:none;
}
.shares:hover>.shareimage {
display:none;
}
The issue is with the last two parts of the CSS file (above). The > only selects child elements so in this example on hover of "shares" I want to hide "catlink" "shareimage" and show "homenetworks".
Is there a way to select external elements on:hover to achive what I am trying?
Thanks!
Can any body tell me how I use last-child selector to style my last div of subs?
This is my HTML -
<div class="main">
<div class="subs"></div>
<div class="subs"></div>
<div class="subs"></div>
<div class="subs"></div>
<div class="paginate"></div>
</div>
I tried it something like this in my CSS -
div.main div.subs:last-child {
border: none;
}
But its not working. If I remove paginate div, then it is working. So can I know how can I style last subs div without any extra id or class declaration.
Thank you.
Assuming there is only ever 1 element succeeding your .subs (.paginate), you can use this:
div.main div:nth-last-child(2) {
border:none;
}
See this JSFiddle
This can be seen as a little hacky, and if your paginate element is ever absent, then the wrong sub element will be targeted. Your only other option is to give the .subs their own container and then use :last-child:
Another JSFiddle
P.S: To understand why :last-child isn't working the way you want it to, I really recommend also reading Spudley's answer.
The problem you have is because of :last-child doesn't work the way you think it does.
The :last-child selector will select an element only if it is the last child of its parent.
In the case of your .main element, the last child inside it is the .pagination div. This means that .main>*:last-child can only select the pagination div. It doesn't matter if you filter it down by specifying .subs; you can't select anything else using :last-child because none of the other elements are the last child of .main. If the actual last child element isn't in the filtered selection, it will select nothing rather than selecting something that isn't the last child.
The best way to work around this is to wrap your subs elements inside an additional layer of markup, so that the last one then does become the last child of that container element. Either that, or move the pagination element outside of the main element; whatever works best for your layout.
The other selector you might have tried, :last-of-type works in a similar way. For the time being, there isn't a CSS selector you can use instead to pick the last .subs element, using your current markup. (unless you're happy to go with :nth-last-child(2) which will pick the second-last child, on the assumption that the pagination div will always be present).
In the new selectors being designed for CSS4, there is a set of 'match' selectors that would do exactly what you want to do. You would use :nth-last-match(1) to get the last matching element. This is the selector you need. Unfortunately, it isn't available in current browsers, and there's no real hint yet as to when (or even whether) it will be available in the future. For the time being, you can read about it here, but not use it. You might be able to use it or something similar via a JS library like jQuery.
Hope that helps explain things to you.
I would suggest that you add an extra class name to the last element. http://jsfiddle.net/5FQck/
div.main div {
border: #000 thin solid;
}
div.main div.subs.last {
border: none;
}
<div class="main">
<div class="subs">subs</div>
<div class="subs">subs</div>
<div class="subs">subs</div>
<div class="subs last">subs</div>
<div class="paginate">pagination</div>
</div>
None of the following selectors work in IE 8 and below, primarily because they are all CSS3 selectors.
:nth-child(N)
:nth-last-child(N)
:nth-of-type(N)
:nth-last-of-type(N)
You could also add that new class to the last element using JQuery: http://jsfiddle.net/5FQck/1/
$('div.main div.subs:last').addClass('last');
If I understand you correctly, I would do it like this.
.main .subs:nth-child(4)
{
border:none;
}
I'm trying to use the css hover, and I have it working on a div by doing:
#complete-paper:hover{
background:url('/static/images/blue-aarow.jpg') no-repeat;
background-position:192px 35px;
background-color:#17aedf;
color:#ffffff;
}
my question is, is there a way to target another html element, like a totally unrelated div, when I hover over the property with the ID of complete-paper? So when you hover over the div with complete-paper, it'll do the above hover css changes, as well as change another div on the page?
Thanks
Edit: The question I had is if it's possible if the div's are unrelated. But in this case they are related, It's actually a p inside a div when you hover over the div, I want the p to also change
Not unless the other div is nested in #compete-paper where the css would look like:
#complete-paper:hover{
background:url('/static/images/blue-aarow.jpg') no-repeat;
background-position:192px 35px;
background-color:#17aedf;
color:#ffffff;
}
#complete-paper:hover .other-div{
/* different css */
}
Not unless the other div is a descendant or sibling of the hovered element.
Since you said it's a descendant, then do it like this:
#complete-paper:hover #decendant_id {
// stuff
}
While the actual HTML elements in the file must be either nested or contained in a single element to be valid ':hover' targets to each other, the css 'position' attribute can be used to display any element where ever you want. I used position:fixed to place the target of my ':hover' action where I wanted it on the user's screen regardless to its location in the HTML document.
So the element is where the browser wants it in the code, and where the user wants it on the screen.
See detailed post->