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>
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>
<!DOCTYPE html>
<html>
<head>
<style>
span {
color: red;
}
</style>
</head>
<body>
<textarea readonly cols=200 rows=40>
<span>
hahahahaha
</span>
</textarea>
</body>
</html>
in this example，is there anyway I can make the text in <span> to be red in color
or can it be done by some other html tag like <textarea>?
No, you can't put an HTML element inside of a form field tag like textarea or input. You can, however, make the color in a textarea red using normal CSS.
textarea {
color: red;
}
<textarea>text</textarea>
An alternative method you can also use is to adjust the styles of the placeholder attribute.
link to jsfiddle
Hope this helps.
::-webkit-input-placeholder {
color: red;
}
:-moz-placeholder { /* Firefox 18- */
color: red;
}
::-moz-placeholder { /* Firefox 19+ */
color: red;
}
:-ms-input-placeholder {
color: red;
}
Who are you?<br />
<textarea readonly rows="4" cols="50" placeholder="Describe yourself here..."></textarea><br />
<input type="text" placeholder="red" />
OK, now I konw I can't insert into
and i have got another way
<style type="text/css">
.testDiv{
bottom: 36px;
height: calc(100vh - 280px);
resize: none;
overFlow-x:scroll;
overFlow-y:scroll;
}
.keyword{
color:red;
}
</style>
<div class='testDiv' id="keyword">
one<br>
two<br>
three<br>
<span class="keyword">four</span><br>
</div>
just add scroll,height css in div
I would like to apply a style ONLY to the absolute first element of a container, if it is an h1, h2, or h3... But, if in the same page there are different headings (h1, h2, h3), only the first one should inherit the styling.
For eg.
<div class="container">
<h2>I want to change this</h2>
<p>....</p>
<h3>But not this!</h3>
<h2>and not this!</h2>
</div>
I tried to use this code:
.container h1:first-of-type, .container h2:first-of-type, .container h3:first-of-type {
padding-top: 0 !important;
}
The problem is that both the first H2 and H3 are affected by this code.
I even tried this... but without success:
.container > h1:first-of-type, .container > h2:first-of-type, .container > h3:first-of-type {
padding-top: 0 !important;
}
How can I do this?
Now again try this,i think this is wht you are looking for
<!DOCTYPE html>
<html>
<head>
<style>
.container > h1:first-child{
background-color: yellow;
}
.container > h2:first-child {
background-color: orange;
}
.container > h3:first-child {
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<h2>I want to change this</h2>
<p>....</p>
<h3>But not this!</h3>
<h2>and not this!</h2>
</div>
</body>
</html>
You cannot do it the way you think. But you can try to undo the changes you made by using the sibling combinator ~ in every possible combination.
This is rather long CSS code. You can make this more comfortable by using less. See this codepen
.container > h1,
.container > h2,
.container > h3 {
background: red;
}
.container > h1 ~ h1,
.container > h2 ~ h1,
.container > h3 ~ h1,
.container > h1 ~ h2,
.container > h2 ~ h2,
.container > h3 ~ h2,
.container > h1 ~ h3,
.container > h2 ~ h3,
.container > h3 ~ h3 {
background: transparent;
}
<div class="container">
<h2>I want to change this</h2>
<p>...</p>
<h3>But not this!</h3>
<h2>and not this!</h2>
</div>
in the following snippet, how come the strong selector overrides the id selector? Isn't an id selector considered more specific, thus having priority?
<!doctype html>
<html>
<head>
<title>Sample document</title>
<style>
strong{color:red;}
#abc {color:blue;}
</style>
</head>
<body>
<p id="abc">
<strong>C</strong>ascading
<strong>S</strong>tyle
<strong>S</strong>heets
</p>
</body>
</html>
You are correct with specificity, but selectors only work with the direct content of the element. So the text color is different for the strong elements because it is nested deeper and the p selector isn't able to change the color for those elements. So if you did want to change the strong elements for #abc you would do it like this
strong { color: red; }
#abc strong { color: blue; }
and if you wanted strong tags text to be the same as the p text then you would do this
#abc, #abc strong { color: red; }
strong { color: red; }
#abc strong { color: blue; }
#def, #def strong { color: red; }
<p id="abc">
<strong>C</strong>ascading
<strong>S</strong>tyle
<strong>S</strong>heets
</p>
<p id="def">
<strong>ABC</strong>
DEF
</p>
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>