I can't seem to make a CSS listen to a :hover.
I have the following CSS:
<style>
.hidescroll
{
}
.hidescroll :hover
{
overflow-x: auto;
}
</style>
And html:
<div class="hidescroll" style="width:100%; height:100px; background-color:green; overflow-y:hidden; overflow-x:hidden;">
<div style="width:300%; height:100px; background-color:red; ">abc</div>
</div>
I would expect the scrollbar to appear when I hover over the div. It doesn't. Why? (I tried to add div before :hover but that didn't help either.)
Inline styles have a higher specificity. You either have to say !important on the hover declaration or move your styles away from inline. I'd recommend the latter.
style="..." on the <div class="hidescroll" takes precedence over the separate css rule in the <style> block.
Since you already have a css rule for hidescroll, put those styles in there instead of putting them inline.
<style>
.hidescroll
{
width:100%;
height:100px;
background-color:green;
overflow-y:hidden;
overflow-x:hidden;
}
.hidescroll:hover
{
overflow-x: auto;
}
</style>
<div class="hidescroll">
<div style="width:300%; height:100px; background-color:red;">abc</div>
</div>
It would be better to also put the styles for the inner div into a style rule.
Note — !important was meant to be used the user agents; used by the end-user to be able to override site styles, for example I use it to in my browser (with the Stylebot plugin) to fix font-size and contrast problems to make sites readable)
Related
I'd like to make all div tags invisible except for the one I mark active in html. Below is an extract from my page:
<div id="container">
<div id="1">
invisible
<div>invisible</div>
<div>invisible</div>
</div>
<div id="2" class="active">
visible
<div>visible</div>
<div>visible</div>
</div>
..or via javascript dom:
document.getElementById("2").classList.add('active');
The expected behavior is that just changing the class will render all "active" classes visible and all unmarked classes invisible at all times.
My first attempt, before adding the parent container and selecting with it,
<style type="text/css">
div { display:none; }
div.active { display:block; }
</style>
did not work. It made all divs invisible.
This second attempt, accurately selecting what I really wanted to select, works fine:
<style type="text/css">
div#container>div.active { display:none; }
div#container>div { display:block; }
</style>
Is this the right way to override a default style?
You can use the :not(selector) selector. Reference: w3schools.
Just add to every div yourChoice + active classes and when you want them to disappear, remove the yourChoice class. Then with the :not(.active) { display: none } they are all gone.
Here's a codepen https://codepen.io/sebaLinares/pen/EddNbQ
Hope it's useful
I have a responsive page with two sections. All elements in right section should be responsive so I used :
#rightSection * {max-width:100%;height:auto}
however any further height styles are being ignored as you see in the code snippet.
I don't want to use !important because I have many inline styles with html codes so I prefer not forcing the styles through CSS. Is there any other way to set heights after height:auto?
#rightSection * {max-width:100%;height:auto}
.mydiv {
width:534px;
height:37px;
box-sizing:border-box;
}
<div id="rightSection">
<div class="mydiv" style="background:#ff0000"></div>
</div>
That Red div is invisible because the height is igonred!
According to your code whatever is happening is fine CSS means Cascading Style sheet that means the last rule applies and that to whichever is more specific. So in your case the first rule has higher specifity than the second rule so height:auto is being applied.
Refer link for more details on Specificity.
So in you code you can make the second role morre specific by different ways which you will come to know from the above link. Below is one such example.
#rightSection * {max-width:100%;height:auto}
#rightSection div {
width:534px;
height:37px;
box-sizing:border-box;
}
<div id="rightSection">
<div class="mydiv" style="background:#ff0000"></div>
</div>
That Red div is invisible because the height is igonred!
Edit:
As pointed out by #connexo i would suggest not use Id selectors refer this for more details on why.
You can use css classes instead as classes help to make your code more general for example
.outerDiv * {max-width:100%;height:auto}
.outerDiv .mydiv{
width:534px;
height:37px;
box-sizing:border-box;
}
<div class="outerDiv">
<div class="mydiv" style="background:#ff0000"></div>
</div>
That Red div is visible now as the rule is more specific.
Hope it helps :)
#rightSection * {max-width:100%;height:auto}
#rightSection .mydiv {
width:534px;
height:37px;
box-sizing:border-box;
}
<div id="rightSection">
<div class="mydiv" style="background:#ff0000"></div>
</div>
That Red div is invisible because the height is igonred!
<style>
*{
display:block;
margin:0 auto;
}
#it is no use to show all the css and html code here.
Why *{display:block; margin:0 auto; } in css to display all the css code on the web?
If *{display:block; margin:0 auto; } was deleted on the html,no such error now.
What result in the effect？
Please try the whole html file.
<html>
<meta charset="UTF-8">
<head>
<style>
*{
display:block;
margin:0 auto;
}
body{
width:900px;
height:50px;
border:solid 4px green;
}
#d2{
width:100%;
height:auto;
}
#d21,#d22,#d23{
width:33%;
float:left;
border:1px solid red;
}
select,input{
width:150px;
height:auto;
}
</style>
</head>
<body>
<div id="d2">
<div id="d21">
<select id="id_select" name="s1">
<option>==> please select <==</option>
</select>
</div>
<div id="d22">
<input type="button" value="start" onclick="start()">
</div>
<div id="d23">
<input type="button" value="stop" onclick="stop()">
</div>
</div>
</body>
</html>
<style>...</style> is also HTML element. So by using * selector in CSS you also select <style> element and apply appropriate styling. <style>'s default style is display:none so by applying display:block you actually make it visible.
The * CSS selector selects all elements. This means that it includes the <style> element, as well as the <head> element, which the style tag lives it. Both of these are hidden by default by your browser.
By adding display: block, you are overriding the default display: none for all element, as shown in Chrome Developer Tools screenshot:
Chrome Developer Tools Screenshot
The direct equivalent of this would be to add this to your CSS:
head, style {
display: block;
}
Workaround
In order to force all elements to be displayed block, and centered, you may want to select just the ones that live inside of the <body> tag like so:
body * {
display: block;
margin: 0 auto;
}
* selector won't accept display:block. Every elements in html except <a> <small> <img> and more..... are block elements. So no need to add display:block to * element. Remove the display:block and check the result.
The * selector can also select all elements inside another element, but <a> <small> <span> are elements. So the css syntax become an error.
I cannot seem to figure out how to get the space between each element to disappear. I mainly want to remove the white space on top. I have tried using margin-top:0 and it didn't work. Any advice would be greatly appreciated.
This is my html
<body>
<div style="background-color:green;">
<h1>top</h1>
</div>
<div style="background-color:blue;">
<h1>body</h1>
</div>
<div style="background-color:red;">
<h1>footer</h1>
</div>
</body>
This is my css
body, div, header {
padding:0;
margin:0;
margin-top:0px;
}
The space is caused by the User Agent Stylesheet (the default styles applied by your browser).
You need to target the H1 also.
html, body, div, h1 {
margin:0;
}
Alternately, rather than individually targetting each element, you can use the universal CSS selector * to target everything at the start:
* {
margin:0;
padding:0;
}
To avoid trouble, you should start your CSS with a CSS reset. This sets all padding, margins etc on all elements to ensure browsers interpret your styles from the same starting point rather than relying on each browser's individual user agent stylesheet.
If you want to go modern, you can use Normalise.css
Include h1 on your CSS:
Fiddle
body, div, header, h1 {
padding:0;
margin:0;
margin-top:0px;
}
I want to prevent this CSS selector from being applied to all elements in the page:
input {
color:red;
}
This will make the text red for <input>s of every type, but I want to exclude one input from this without changing the selector or style of this CSS rule. The element should have the default style (how it is when you have no css on the page).
You can use the not selector. Since an input field should have a name, you could exclude it by using:
input:not([name="exludeme"]) { }
This method won't work in IE8 and earlier versions. To support ie7 and ie8 too, you could use the attribute selector. In this case you have to reset the field:
input[name="exludeme"] { /*add all your reset styles here*/ }
add an id for the different one and apply it just for him, and to make sure that no other css will overwrite the css you choose use !important
html:
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box" id="diff"></div>
css:
div.box {
background-color:red;
width:50px;
height:50px;
position: relative;
}
#diff{
background-color:black !important ;
}
check this: http://jsfiddle.net/y32Wv/
note: !important is optional, depends on the selector position inside the file, but in cases where it might be overwrite by other css rule (for example if someone change the order of the css rules) it will stop working right, and !important will prevent it from happening.