I am trying to set a button's background color if the menu is open. The class for the menu when open is client-menu-open. The class for the button is client-header button. Is there a way to set the button's color only if the menu is open? I have tried .client-menu-open ~ .client-header button, .client-menu-open .client-header button... Can't get anything to work.
Here is the HTML:
<body>
<div>
<header>
<button class="client-header button"/>
</header>
<div class="client-menu client-menu-open">...</div>
</div>
</body>
I think it would be (assuming the class-menu-open is added, not swapped for):
.client-header button client-menu-open {
background-color: #abcdef;
}
If your CSS is all in one line it's .class.class. If it's a div in a div it's .class .class.
So it should be:
.client-menu.client-menu-open for <div class="client-menu client-menu-open">
Only if you are working with HTML elements do you not use a # or . to select.
You can't go backwards into a previously nested element. You can probably do this with Javascript, but your question is based on CSS only.
Related
I have an html snippet that will hide a button when clicked:
<div class="item">
Some Text
</div>
<div>
<button onclick="hideButton()">
Hide me
</button>
</div>
CSS:
.item {
background-image: linear-gradient(180deg,black,white);
}
Using CSS, is it possible to remove the background-image style on div.item if the button nested in the sibling div is in the hidden state? I know how this can be done in JavaScript, but curious if this can be handled solely with CSS?
This is possible using the newly added CSS has selector: div:has(> button:active) ~ .item This is not widely supported at the moment, so JavaScript might be what you need here.
I'm trying to make a button without a link, as the background is already linked. Therefore you should be able to cick through it. I know about pointer-events:none but when using this, the div's :hover won't work anymore.
Is there any way to achieve this?
My HTML is:
<div class="button">
<span>Click here</span>
</div>
CSS:
.button { pointer-events: none; }
.button:hover { ... }
The "button" class should have an :hover effect + click through. This setup won't show the :hover effect.
Without seeing your code I would suggest one of two routes:
1) Just link both. No bigs.
2) Link your background via javascript. If the button is a child element, the click event will bubble to your linked background.
In my AngualrJS application we use angular-ui-bootstrap tooltips.
I have one tooltip that needs to accommodate long text.
The answer to SO question Displaying long text in Bootstrap tooltip shows me how to make tooltips go wider...
... but what if I don't want to make all tooltips wider, just one specific tooltip?
(Notes: AngularJS 1.2.24, jQuery available... but I'd rather just be able to apply a style to that single tooltip than get more complicated)
If on the other hand you have tooltip-append-to-body="true", you can use the following modified version of #Daryn's code
CSS
.tooltip-400max .tooltip-inner {
max-width: 400px;
}
HTML
<div id="element1"
tooltip-append-to-body="true"
tooltip-class="tooltip-400max"
tooltip="{{ model.longTooltip }}">Text</div>
<div>More page content</div>
As long as you don't have tooltip-append-to-body="true", you can use the following CSS (in this example, making the tooltip max width 400px):
CSS
.tooltip-400max + .tooltip .tooltip-inner {
max-width: 400px;
}
HTML
<div id="element1"
class="tooltip-400max"
tooltip="{{ model.longTooltip }}">Text</div>
<div>More page content</div>
The key in the CSS above is the adjacent sibling selector, +.
That's because, as you probably know, when you hover over element1, the tooltip is inserted as a div after element1, approximately like this:
<div id="element1"
class="tooltip-400max"
tooltip="{{ model.longTooltip }}">Text</div>
<div class="tooltip fade in" and other stuff>...</div>
<div>More page content</div>
Thus the CSS selector .tooltip-400max + .tooltip will select only this inserted tooltip, which is an adjacent sibiling. The descendant .tooltip-inner max-width styling will not affect all tooltips, only tooltips for elements with tooltip-400max class.
How can I make my css sprite back button validate through W3C? Here is my code to call the button.
<div class="icon-backbtn"></div>
I ended up using the below code to pass W3C validation and still using CSS Sprites.
<a id="icon-backbtn" title="Back" href="#" onclick="history.go(-1)"></a>
You shouldn't have a <div> as a child of an <a>, use an <img src="..."/> instead.
EDIT:
If you have a spritesheet, then simply add display:block; for the anchor and it will behave just like a div.
Since you are using a CSS Sprite, I would suggest placing the <a> inside the <div> (proper way to do it) and add some css:
HTML
<div class="icon-backbtn">
</div>
CSS
.icon-backbtn a {
display:block;
cursor:pointer;
text-decoration:none;
text-indent:-9999px;
}
The CSS sets the link to be a block element, thus occupying the width and height of the div. The remaining styles are to prevent the regular link behavior for texts, since you are using an image.
With regard to the following markup:
<div class="mydiv">
<img src="myimage.gif" />
</div>
The div.mydiv is basically styled to be a pretty rounded edge box around the image specified within the link. Lets say its background-color starts as black.
I would like to make it so that when I :hover over myimage.gif, the style of div.mydiv changes the background-color to, lets say, yellow.
How can I specify the style of div.mydiv when a nested <a> is being hovered over?
Use
.mydiv:hover
{
background-color:yellow;
}
in a CSS file, assuming you have one. I don't think there's a way to do this inline.