I can't find how to do this online, how do I go about selecting any elements within a element and apply styles to them. For example:
HTML:
<div class="cont">
<div class="txt">Hello World!</div>
<img src="img1.jpg">
<img src="img2.jpg">
</div>
CSS:
.txt:hover + img {
display:none;
}
I want that class style to hide ALL images next to it. It only hides ONE image at the moment though...
If you want to hide all succeeding image elements, use the general sibling combinator, ~.
.txt:hover ~ img {
display:none;
}
EXAMPLE HERE
You were using the adjacent sibling combinator, +, which will only hide the adjacent element.
You can do this in two ways; With CSS-only, and with jQuery:
CSS-way:
.txt:hover ~ img {
display:none;
}
jQuery-way:
$(function() {
$('.txt').hover(function() {
$('img').toggle();
});
});
Related
I have the following structure:
<div id="wrapper">
<div></div>
<div></div>
<div itemprop="description"></div>
</div>
<div itemprop="description"></div>
<div></div>
<div></div>
How to select only the first div with itemprops=description?
Or how to select the 3rd div inside #wrapper div?
If you can, add a class to the element you wish to target, e.g.:
<div id="wrapper">
<div></div>
<div></div>
<div class="{{target-class}}" itemprop="description"></div>
<div itemprop="description"></div>
<div></div>
</div>
Then use your "target" class name to select the relevant element. Its much cleaner and will cover you in the case of changes to the DOM.
I wouldn't advice targeting an element using nth-child unless you are targeting an element exclusively because it is the nth element.
An alternative would be to target the element by targeting all elements after it, e.g.
[itemprop="description"] {
/* targeted */
}
[itemprop="description"] ~ [itemprop="description"] {
/* not targeted */
}
You can see an example of that working here
For this specific case:
#wrapper > div:nth-child(3)
Though if the markup is likely to change, a better option would be to use a class or id, if possible.
Here are your options with CSS alone using some advanced selectors.
option 1
As there is currently only 1 itemprop div within the #wrapper, just select the div using the itemprop attribute - working fiddle
#wrapper div[itemprop="description"] { // your style }
option 2
This will select the last child element provided it's a div
#wrapper div:last-of-type { // your style }
option 3
As others have pointed out you can use :nth-child() selector. I wouldn't recommend this if the number of divs within #wrapper will vary though.
#wrapper div:nth-child(3) {
// your style
}
option 4
If you're going to have multiple itemprop divs inside the wrapper you can cancel out styling by selecting siblings. However, this will only work on the itemprop divs within the #wrapper.
#wrapper div[itemprop="description"] { // your style }
#wrapper div[itemprop="description"] ~ div[itemprop="description"] { // cancel out styling }
I want to :hover a picture and then showing a :before on an other element (h2) how can I do this?
If you have both the elements laid out as siblings, you can show them using the sibling selector +:
img:hover + h2:before {display: block; width: 100%; height: 2px; background: #f00; content: ' ';}
<img src="http://lorempixel.com/400/200/" />
<h2>Image</h2>
The above solution works only if the elements are adjacent or somehow related, as CSS cannot use parent selector (which is possible in CSS 4 specification). But this can be achieved easily using jQuery:
$("img").mouseover(function () {
$("h2:before").css("display", "block");
});
Is it possible to style another element on :focus of a specific element?
Something like:
input:focus #header {
display: none;
}
I tried doing that but it didn't work.
Yes,it is possible if element is a sibling or a child to the :focus element. If it is not your case (affect whatever you want) than you should use javascript.
.input:focus #header
That is applying selecting all #header where they are a descendant of input
If its a sibling so you want, use the next sibling selector +:
input:focus + #header
For more information on child/sibling combinators
you can also use 'preceded by' selector -> https://www.w3schools.com/cssref/css_selectors.asp
HTML:
<button>button</button>
<div class="div1">div1</div>
CSS:
button:hover ~ .div1 {
color: red;
}
So you hover over the button BUT the div1 element gets styled.
Just make sure that the BUTTON element is first and the element you are styling is SECOND.
i have 2 div elements in html :
<body>
<div id="one"></div>
<div></div>
</body>
I want to hide div elements after div with id="one" from CSS, I tried this :
#one:after{display:none}
This doesn't work any other way to do?
No, :after pseudo doesn't do that, you need to use
#one + div {
display: none;
}
Demo
And if you want to hide ALL div followed by #one you will have to use
#one ~ div {
display: none;
}
Demo 2
:after applies to generated content. You want the adjacent sibling combinator:
#one + * {
}
If you know the exact position of the child element (like in you case its 2nd child), you can use nth-child pseudo class
div:nth-child(2)
{
display:none;
}
Fiddle:http://jsfiddle.net/ankur1990/HDq2T/
I have twp elements inside my Div,both have same class name. I want to hide my first element with the class name .cart. I am using the below code.
.component-bottom .component-basket + .cart{
display:none;
}
<div class="component-bottom">
<div class="component-basket">
<div class="cart">
</div>
<div class="cart">
</div>
</div>
</div>
Am I using the correct code?
You can use a direct child selector for the .cart element:
.component-bottom .component-basket > .cart
{
display:none;
}
Now you only want the first element of this selector. There isn't an original selector for this, but you can make a overwrite selector for this.
You can overwrite all but the first one ElementA ~ ElementB:
.component-bottom .component-basket > .cart ~ .cart
{
display:block;
}
This search for all .cart elements inside .component-basket where ANY previous adjacent sibling is .cart. The first of the element doesn't have a previous sibling of this class, so it would not be selected.
This is called a general sibling selector.
jsFiddle
This should support IE7 and above:
Note Requires Windows Internet Explorer 7 or later.
source: http://msdn.microsoft.com/en-us/library/ie/aa358824(v=vs.85).aspx
an easier solution commented by #jrConway:
Make it display: block by default and use:
.component-bottom .component-basket > .cart:first-child
{
display: none;
}
Example
Note that this only work when you use ONLY .cart as child element. Whenever an other class is at the first 'place' it will not work.
Using adjacent sibling selector won't work here, as your element is nested inside .component-basket and hence it fails.. Simple way is to call a class on the element you want to hide, if you cannot change the DOM than you can use first-child or nth-of-type(1)
.component-bottom .component-basket div.cart:nth-of-type(1) {
display:none;
}
Demo
As #Vucko already commented, nth-of-type() is a CSS3 spec pseudo..
Hence if you want to support legacy browsers, you can use Selectivizr,
this will save you a lot of classes/ids.
Stick this in your CSS file:
.hide {
display: none;
}
Then add that class to whatever element you want hidden like so:
<div class="component-bottom">
<div class="component-basket">Foo</div>
<div class="component-basket cart hide">Foo</div>
</div>
The advantage of this method is that you get to re-use that "hide" class anywhere you want.
As understood, check this might help
CSS
.cart{
display:none;
}
.component-bottom .component-basket
{
//some common properties
}
HTML
<div class="component-bottom">
<div class="component-basket cart">component-basket Hidden div</div>
<div class="component-basket">component-basket visible div</div>
</div>
This will hide the div with the cart class (the First div)
Thanks,
Dhiraj