Now I have my code in this way;
CSS:
.dhimage{
width:25px;
height:25px;
}
JAVASCRIPT:
var image = document.createElement('img');
image.className= 'dhimage';
What changes if i format CSS like this:
.something .dhimage{
width:25px;
height:25px;
}
it means, your newly created image has to be inside a container having class something, only then the properties of class dhimage will be applied to it. i.e
<div class="something" >
<img class="dhimage" />
</div>
if your markup is like above, then only below css will work
.something .dhimage
{
width:25px;
height:25px;
}
it is called CSS specificity .
however, if you directly define the css i.e.
.dhimage
{
width:25px;
height:25px;
}
it will work independent of the parent's CSS.
Now why is it done.
say you have a class name menu. but you want the menu class to be different for menus inside the footer of your page and different for the menus inside header of your page,but still you want to keep the name menu because you also have certain common rules for all the menus on the site like font-family or whatever. then you can define it as follows:
.menu
{
font-family:'Times';
}
.header .menu
{
color:Red;
}
.footer .menu
{
color:Orange;
}
and your markup is like
<div class="header">
<ul class="menu">
</ul>
</div>
<div class="content">
</div>
<div class="footer">
<ul class="menu">
</ul>
</div>
your header and footer menu will have different color.
Nothing, really, except for the fact that, in order for the styling from .dhimage to be effective, the element containing that class must be inside an element with the class .something.
Related
I have a modal that, when opened, makes everything disappear via display-none except for itself. Or, at least, that's what I want it to do, but it doesn't. I don't know much about child selectors, but I think this should work since .fixed#myNav is a direct child of .fixed#all-body. Does anybody know what could be wrong?
#all-body {
display: block;
}
#myNav {
display: none;
}
.fixed#all-body >:not(.fixed#myNav),
.fixed#all-body >:not(.fixed#myNav) * {
display: none !important;
}
<body id="all-body">
<div class="site-header">
<button onclick="toggleMobileMenu()">Open menu</button>
<!-- Other header content-->
</div>
<div id="myNav">
<button onclick="toggleMobileMenu()">Close menu</button>
<!-- Other menu content-->
</div>
<!-- Other page content-->
</body>
function toggleMobileMenu() {
var element = document.getElementById("myNav");
element.classList.toggle("fixed");
var element = document.getElementById("all-body");
element.classList.toggle("fixed");
}
More context, if anybody's wondering: When the button to open the modal is clicked, the .fixed class is added to both #all-body and #myNav, and I want their respective display values to switch. However, since #myNav is a child of #all-body, this doesn't work. I'm hoping to use the code above to basically say "everything except for #myNav is at display: none."
function toggleMobileMenu() {
var element = document.getElementById("all-body");
element.classList.toggle("fixed");
}
#all-body {
display: block;
}
#myNav {
display: none;
}
.fixed #myNav{
display:block;
}
.fixed#all-body >:not(#myNav) {
display: none !important;
}
<body id="all-body">
<div class="site-header">
<button onclick="toggleMobileMenu()">Open menu</button>
<!-- Other header content-->
</div>
<div id="myNav">
<button onclick="toggleMobileMenu()">Close menu</button>
menu
</div>
<p>page content</p>
</body>
.fixed class is set for body only.
Added display:block for nav when .fixed is parent.
Content should be wrapped in a tag for this to work.
I found it easier to follow what was going on if there was just one class, showMenu, introduced rather than trying to use fixed twice.
What this snippet does is toggle showMenu on the body. It also ensures the 'other content' on the page is wrapped in an element so that it too can respond when the showMenu class is added to body.
Then it does what you were basically doing, set all child elements of body to display none when the showMenu class is set and then it sets the menu to block so it alone shows.
function toggleMobileMenu() {
var element = document.getElementById("all-body");
element.classList.toggle("showMenu");
}
#myNav {
display: none;
}
/* stop showing every element below body (but not body itself) */
.showMenu>:not(#myNav) {
display: none;
}
/* override the above setting for just the menu */
.showMenu #myNav {
display: block;
}
<body id="all-body">
<div class="site-header">
<button onclick="toggleMobileMenu()">Open menu</button>
<!-- Other header content-->
</div>
<div id="myNav">
<button onclick="toggleMobileMenu()">Close menu</button> Other menu content
</div>
<div>
Other page content
</div>
I couldn't see how to do it without making sure the other content is in its own element - if it isn't it will stay visible which I believe you don't want.
I know similar questions have already been asked at least a dozens of times (at least I found a dozen of them), but none of the many answers I found solved my problem.
I just want to color the text which is directly(!) inside these <h3> tags:
<div class="page-header">
<h3> I want this green <div class="page-header-button-group">But not this</div></h3>
</div>
please note: I cannot change anything in the html. I tried this:
.page-header > h3:first-child{
color:green;
}
But it sadly is not doing what I need.
This should help you.
h3 {
color: green;
}
h3>* {
/* all children of h3 */
color: black;
}
<div class="page-header">
<h3> I want this green
<div class="page-header-button-group">But not this</div>
</h3>
</div>
The problem is, that the default value for color is not specified and its value is inherited from the parent (see w3schools). That means, since you specified a color for the <h3> and the <div> has no other color rules, it will inherit the color from its parent.
The only solution is to reset the color with an extra rule for each child. h3:first-child > * (any element which is a direct child of the h3).
.page-header > h3:first-child{
color:green;
}
.page-header > h3:first-child > * {
color: #000;
}
<div class="page-header">
<h3> I want this green <div class="page-header-button-group">But not this</div></h3>
</div>
If this is a common thing in your page, you may also think of a class, e.g.: .color-default { color: #000; } (propably adding !important). Then you can just define the div as <div class="default-color">.
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<div class="list-group">
Home
Quem-somos
FAQ
</div>
</div><!--/span-->
</div><!--/row-->
I have this code above, and i want highlight the current page with the danger color, but the .active class it's blue in this particular code.
I already try setup in my stylesheet:
.active {
background-color: red;
}
but has no effect
Even though specifying !important will work, this is is bad practice as it stops the css cascading and will probably cause more problems than it fixes. All you need to do is to be more specific with your selector.
.list-group a.active { background-color: red;}
See my Example
You could force the override with !important like so:
.active {
background-color: red !important;
}
This worked for me:
a.list-group-item.active {
background: red;
}
Following is the html structure, that is repeating inside my html page.
<article class="tweet-inner">
<div class="tweet">
<div class="text">
<p>Coming down! Time for Croation BBQ </p>
</div>
<p class="last">
<span class="pull-right">
<small> Hello this is first text </small>
<small> Hello this is second text </small>
</span>
</p>
</div>
</article>
The above is one unit of repeating structure inside my HTML.
The functionality I want is, when you hover over the tweet text, .tweet .text p then the content of .last should show.
I did the following :
.last{
display: none;
}
.tweet .text p:hover .last{
display: block;
}
Two doubts :
You should be able to see the .last of only the element upon which you have hovered.
The above is not working, the fiddle is http://jsfiddle.net/EymLT/
Thanks!
Your CSS selector is incorrect. Firstly .last is not a child of .text, and the p element cannot be hovered because it is invisble. Try this:
.tweet:hover .last{
display : block;
}
Updated fiddle
Replace your last style with this:
.tweet .text:hover + .last{
display : block;
}
You can use ~ in CSS
DEMO http://jsfiddle.net/kevinPHPkevin/EymLT/4/
.last{
display:none;
}
.text:hover ~ .last{
display : block;
}
If you replace my ~ with > it will be more browser compatable. The > ensures only the child is seleted so you can use a parent div as the hover target.
.last{
display:none;
}
.tweet:hover > .last{
display : block;
}
I am wondering how i would be able to style links inside a given div with a given class like
.navigation-div : a:link,a:visited {
color:red;
}
Some html
<div class="navigation-div">
Home
List
Download
Files Used
Documentation
</div>
<div class="client-header">
<h1>CRUD Application</h1>
</div>
Is there a selector for this kind of thing?.
.navigation-div a:link, .navigation-div a:visited {
color:red;
}
jsFiddle example