I want to know if there's ability to change CSS of element that is not direct child or sibling of element hovered.
<style>
.one:hover .two {
color:red;
}
</style>
<div>
<div class="one">
111
</div>
</div>
<div class="two">
222
</div>
http://jsfiddle.net/hgd0drky/
Unless you add a parent element to both and make them have Child / Sibling relationship it is not possible purely based on CSS.
You will need javascript, however to demonstrate how easy this can be, I shall make up CSS
http://jsfiddle.net/hgd0drky/1/
<div class="one">
<div >
111
</div>
<div class="two">
222
</div>
</div>
CSS
.one:hover div {color:red;}
.one:hover .two {color:red;}
Which is just an extension of your code.
Related
How to change CSS for the Div in the 1st line having h3 text "Example Text1"
<div class="test">
<div>
<h3> Example Text1 </h3>
</div>
</div>
<div class="test">
<div>
<h3> Example Text2 </h3>
</div>
</div>
You can't apply a CSS rule based on the contents on an element with CSS only, with the exception of the :empty selector. :contains has been a suggested selector but has not been implemented.
You will either need to use JS, or apply CSS based on the ordering of the elements you have, for example in this case you could use
.test:first-of-type h3 {
color: red;
}
To only style the first h3 tag.
You could also look into something like :contains() from jQuery if you don't mind adding a dependency.
You can't give CSS to div having a child with specific text. But you can use :first-child CSS.
.test:first-child h3 {
color: red;
}
<div class="test">
<div>
<h3> Example Text1 </h3>
</div>
</div>
<div class="test">
<div>
<h3> Example Text2 </h3>
</div>
</div>
I want to have a separate style for each 4th element in a row.My html structure is like this
<main>
<div class="a">
<div class="container"></div>
</div>
<div class="a">
<div class="container"></div>
</div>
<div class="a">
<div class="container"></div>
</div>
<div class="a">
<div class="container"></div>
</div>
</main>
and css is
.container:nth-child(4n) {
left: -2rem !important;
}
So it doesn't reflect on that 4th element.
Any help is highly appreciated. Thanks in advance.
Given the markup you provided, your selector will never match any of your elements as there is only one child .container element within each .a parent element. What you want to select is the .container child element of every 4th .a parent element, like so:
.a:nth-child(4n)>.container{
left:-2rem;
}
Note that the above is identical to:
main>div:nth-child(4n)>.container{
left:-2rem;
}
If you're asking wht the left property isn't being applied to that element then that's because you also need to give it a position. In this case, relative would probably suit your needs best.
.a:nth-child(4n)>.container{
left:-2rem;
position:relative;
}
Alternatively, you could also achieve the above with a single property by using the translatex transform function (although transform does still require some prefixing].
.a:nth-child(4n)>.container{
transform:translatex(-2em);
}
Update Css
.a:nth-child(4n) {
left: -2rem !important;
color:red;
}
Further Link
Since each .container class is surrounded by <div>'s, you cannot select it directly because there is only one child per <div>. If you want to select every element inside the <main>, you can do something like this:
CSS
main .a:nth-child(4n) {
color: red;
}
<main>
<div class="a">
<div class="container">Hello</div>
</div>
<div class="a">
<div class="container">Hello</div>
</div>
<div class="a">
<div class="container">Hello</div>
</div>
<div class="a">
<div class="container">Hello</div>
</div>
</main>
JSFiddle
In this html:
<div class="main">
<div class="container1">
<div class="div_1">
....
</div>
</div>
<div class="container2">
<div class="div_2">
....
</div>
</div>
</div>
I want to target the div_2 like this
.main .container1 .container2 .div_2 {}
That means the target also has to go through the container1 div to apply the css.
Why? This could be a very useful trick without using any scripts
for example targeting div_2 on a page when container1 exists while on another page does not exist so it does not work. Is this possible?
Use the adjacent sibling selector (+):
.main .container1 + .container2 .div_2 {
background-color: aqua;
}
<div class="main">
<div class="container1">
<div class="div_1">div_1</div>
</div>
<div class="container2">
<div class="div_2">div_2</div>
</div>
</div>
The selector above is saying: Target .div_2, that is a descendant of .container2, which immediately follows its sibling .container1, which is a descendant of .main.
References:
8.3.1 Adjacent sibling combinator (+)
8.3.2 General sibling combinator (~)
CSS Selectors Level 3
.main .container1 .container2 .div_2 {} This will only target .div_2 if both .container2 is nested in .container1.
The closest you can get is a sibling selector.
.container1 ~ .container2 .div_2
I've an html file and need to hide some elements from this.
My code is look like this,
<div class="test">
Demo1
</div>
<div class="test">
Demo2
</div>
<div class="test">
Demo3
</div>
<div class="test">
Demo4
</div>
I want to hide the Demo2 and Demo4 links using css. Kindly help me to do this :)
You could use nth-of-type:
The :nth-of-type CSS pseudo-class matches an element that has an+b-1
siblings with the same element name before it in the document tree,
for a given positive or zero value for n, and has a parent element.
.test:nth-of-type(2) a, .test:nth-of-type(4) a{
display:none;
}
<div class="test">
Demo1
</div>
<div class="test">
Demo2
</div>
<div class="test">
Demo3
</div>
<div class="test">
Demo4
</div>
Or
nth-child with the odd switch if you want a repeating pattern of hiding elements
The :nth-child(an+b) CSS pseudo-class matches an element that has
an+b-1 siblings before it in the document tree, for a given positive
or zero value for n, and has a parent element.
.test:nth-child(even) a {
display: none;
}
<div class="test">
Demo1
</div>
<div class="test">
Demo2
</div>
<div class="test">
Demo3
</div>
<div class="test">
Demo4
</div>
Use nth-child to select a div and then change its a to hidden http://jsfiddle.net/8gh7js6a/
.test:nth-child(2) a {
visibility:hidden;
}
.test:nth-child(4) a {
visibility:hidden;
}
Here is my html code ,
<div class="parent">
</div>
I am adding one div inside the parent div on runtime, It would be like this ,
<div class="parent">
<div class='child'>
</div>
</div>
Is there is any way to add style to child div using parent div ? Means can I do something like ,
<div class="parent" style="SET LEFT MARGIN FOR CHILD ELEMENT ">
</div>
So when child is added to parent div , the style will be automatically applied to child.
Based on specification — no, you can't.
http://www.w3.org/TR/2002/WD-css-style-attr-20020515
You can't do this directly with inline css on parent div. But you can inherit styles from parent div like this:
CSS:
.child {
margin-left: inherit;
}
HTML:
<div class="parent" style="margin-left: 15px;">
<div class="child"> ... </div>
</div>
You can enclose the .child tags with i.e. < span > or < div > in this case, then set the inline CSS for the .parent tags, and then use "inherit" on the .child tag.
<div class="parent" style="color:yellow;">
<div class="child" style="color:inherit;">
</div>
</div>
The same was a successful solution applied to a similar problem I was facing regarding how the emails or links appeared inside a Gmail message body.
<div>
Hello <span style="color:yellow;">SomeMail#gmail.com</span>, we have just posted this on our website:
<br/>
Page Title of Website
</div>
I hope this offers a solution to your situation or at least inspires you closer to your preferred remedy.
Using the > for direct children:
.parent > div {
margin-left: 30px;
}
You can use this
<div class="parent">
<div class='child'>
</div>
</div>
CSS
.parent >.child {
margin-left: 30px;
}