As the title shows, is it possible to name several elements and apply the same :hover command to them all.
So I don't have to do this:
#test:hover > .info, #test2:hover > .info {}
You could make a class and apply it to those elements. For example:
<head>
<style type="text/css">
.myClass:hover > .info {
background-color: blue;
}
</style>
</head>
<body>
Test Link One
<span id="test2" class="myClass">Test Link Two</span>
</body>
Related
I have a dropdown menu with some options inside of it. An option has 2 text, text1 and text2.
Take a look at simplified code below to see what happens when an option is hovered:
<!DOCTYPE html>
<head>
<style>
.hh1 { color: purple !important; }
.hh2 { color: green; }
.hh3 { color: red; }
</style>
</head>
<body>
<div class="hh1">
<div class="hh2">
test1
</div>
<div class="hh3">
test2
</div>
</div>
</body>
</html>
Expected behaviour when an option is not hovered, it will be the color defined in its div (in this case, text1 is green and text2 is red. When it is hovered, it will be the one defined in its parent div, in this case purple.
I am surprised !important in the code above does not make test1 and test2 in purple color.
How can I emphasis the purple rule ?
Thank you
You can't.
!important only affects the cascade. It cannot force the value of a child element's property to become inherit.
If you want to change the colour of a child element, then you must match it explicitly.
e.g.
.hh1, .hh1 > .hh2 { color: purple; }
You haven't put any hover effects in your style tag That's why your hover effect isn't applied.
Take a look I have made changes to your code.
<!DOCTYPE html>
<head>
<style>
.hh1 { color: purple !important; }
.hh2 { color: green; }
.hh3 { color: red; }
.hh2:hover {
color: purple;
}
.hh3:hover {
color: purple;
}
</style>
</head>
<body>
<div class="hh1">
<div class="hh2">
test1
</div>
<div class="hh3">
test2
</div>
</div>
</body>
</html>
Use color:inherit on :hover , also you can write your :hover effect in one line.
<!DOCTYPE html>
<head>
<style>
.hh1 { color: purple !important; }
.hh2 { color: green; }
.hh3 { color: red; }
.hh2:hover , .hh3:hover {
color: inherit;
}
</style>
</head>
<body>
<div class="hh1">
<div class="hh2">
test1
</div>
<div class="hh3">
test2
</div>
</div>
</body>
</html>
I want to overwrite styles which defined with :root pseudo-class.
I have css like below:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div><p>hello world</p></div>
<style type="text/css" media="screen">
:root p{
color: red !important;
}
html > div > p{
color: green !important;
}
</style>
</body>
</html>
I want to display color green instead of red. How can i overwrite the styles
html > div > p does not select your element because there is a body element between the html and the div.
html > body > div > p does select your element, but the specificity is lower than :root p, which has a pseudo-class.
The trick is easy: two pseudo-classes are more specific than one. Use :root:root p
:root p {
color: red;
}
:root:root p {
color: green;
}
<div><p>hello world</p></div>
use div > p instead of html > div > p
div > p {
color: green!important;
}
JSFIDDLE
Try to this:
:root p{
color: red !important;
}
:root div > p{
color: green !important;
}
<div><p>hello world</p></div>
I'm try to write a complex selector for css3.
I need to select the second div of a child of a an item:
here the html code for my test:
<!DOCTYPE html>
<html>
<head>
<style>
div.main > div:nth-child(3) {
display: none;
}
</style>
</head>
<body>
<div class="main">
-> 1-level
<div>
-----> 2-level
<div>--------> 3-level BAR</div>
<div>--------> 3-level FOO</div>
</div>
</div>
</body>
</html>
i need to select the 3-level FOO ! but i can't append another class other .main class
I'm trying with 'div.main > div:nth-child(3)' without any success....
here a jsfiddle with this code.
http://jsfiddle.net/vwwuuhao/1/
I think you missunderstood the way nth-child() works. It is used to select the nth-child of an element and not the "nth-level-child".
Your selector should look like this :
.main > div > div:nth-child(2) {
display: none;
}
.main > div > div:nth-child(2) {
display: none;
}
<body>
<div class="main">
-> 1-level
<div>
-----> 2-level
<div>--------> 3-level BAR</div>
<div>--------> 3-level FOO</div>
</div>
</div>
</body>
Do like this:
div.main > div > div:last-child {/*or use div:nth-child(2)*/
display: none;
}
div:nth-child(3) is the third sibling child. You are looking for:
// vvv — this is 2nd level
// vvv — this is 2nd level
// vvv FOO is a second sibling
div.main > div > div:nth-child(2)
try to use div:nth-of-type(x)
sample here: https://jsfiddle.net/L6xkanrm/1/
eg:
if you want to select the SECOND div inside another div, use:
div div:nth-of-type(2) {
display: none;
}
i have an html as below
<!DOCTYPE html>
<html>
<head>
<style>
p{font-size:14pt;color:red;}
</style>
</head>
<body>
<div>
<p> this is a p without class defined</p>
</div>
<div class = "temp">
<p> this is a p tag in another div</p>
</div>
<div class = "test">
<p> this is a Original Mail</p>
<p class="hello"> this is a p tag </p>
<p> this is a p without class defined</p>
<div> this is a div tag
<p> this is a p tag within the div</p>
</div>
</div>
</body>
</html>
i want to apply the style to all p Tags within the div with class test.
i tried putting like div.test > p{font-size:14pt;color:red;}
but then the style is not getting applied to the p tag within the child div of div with class name test.
please help me to sort out this.
JSFiddle: http://jsfiddle.net/8K2yL/
The selector you want is:
div.test p {
font-size:14pt;
color:red;
}
This will select all p tags that are anywhere inside a div.test tag.
The selector div.test > p will only select p tags that are DIRECT children of div.test.
Specifying the tag name right after the class name selects all the matching tags found inside the class.
.test p{
font-size:14pt;
color:red;
}
The > selector selects direct decendants. Therefore children of children will be ignored.
Change to this:
div.test p {
font-size:14pt;color:red;
}
Just do like below
div.test p{
font-size:14pt;
color:red;
}
Fiddle for you DEMO
<style>
div.test p{
font-size: 14pt;
color: red;
}
</style>
<html>
<head>
<style>
input[type='text'], select {
background: blue
}
.error {
background: red
}
</style>
</head>
<body>
<input type="text" class="error"/>
<select class="error">
<option>non-sense</option>
</select>
</body>
</html>
If the class .error has background red than it must be red. Even if input[type="text"] has a blue background. Tested in IE and GC.
The reason for the problem you're seeing, is that input[type=text] is more specific than .error, so it will override it. Use a more specific selector:
input.error
Or if you want to really be safe:
input[type=text].error
More information about CSS specificity, and how it's calculated
Another approach would be to keep the current selector, but add the !important keyword on the rule:
.error { background: red !important; }
That would instantly make it override any other rules matched for the element. Beware, it's a very powerful tool, and may lead to unexpected results in the future.
Use .error { background: red !important }
Be aware of the limitations this has, please see: !important rules (CSS 2.1 Section 6.4.2)
Try this
<html>
<head>
<style>
input[type='text'], select { background: blue }
.error { background: red; }
input.error { background: red; }
</style>
</head>
<body>
<input type="text" class="error" />
<select class="error">
<option>non-sense</option>
</select>
</body>
</html>