I know this is a classical one but I find no answer on the net:
I have this html code:
<div class="comment>
<div class="myLinks">Some Links</div>
<div class="comment">
<div class="myLinks">Some Links</div>
</div>
</div>
Then I have this css (written in scss):
.myLinks {
display: hidden;
}
.comment {
&:hover {
.myLinks {
display: visible;
}
}
}
When the pointer goes above the first comment block, the nested one's hover effect is also activated. What I want is my links to be visible only in the comment being hovered, not in his parents or children.
How can I do this? Thanks!
.myLinks{
display:none;
}
.comment:hover > .myLinks {
display: block;
}
Used to this css
.myLinks{
display:none;
}
.comment:hover .myLinks{
display:block;
}
Demo
or
-------
.myLinks{
visibility:hidden;
}
.comment:hover .myLinks{
visibility: visible;
}
Demo2
Related
Here's a fiddle of what I've tried and what I want to do:
#child {color:white;}
#parent::after{
content:"This";
color:black;
}
#parent::after:hover + #child{
color:black;
}
#parent::after:hover ~ #child{
color:black;
}
<div id='parent'>
<span>Change child color when you hover</span>
<div id='child'>
Color
</div>
</div>
When I hover the ::after of the #parent, I want to change the color of #child.
Is this possible to do with pure CSS, or do I have to use js?
pointer-events can help you here
#child {
color: white;
}
#parent *,
#parent{
pointer-events: none; /* disable for parent and all childs */
}
#parent::after {
content: "This";
color: black;
pointer-events: initial; /* keep it for the pseudo element */
}
#parent:hover #child { /* the pseudo element will trigger this hover */
color: black;
}
<div id='parent'>
<span>Change child color when you hover</span>
<div id='child'>
Color
</div>
</div>
You can do this like that way... For child element you can't use + or ~ sign. It's used for siblings not child.
#child {color:white;}
#parent::after{
content:"This";
color:black;
}
#parent:hover #child{
color:red;
}
#parent:hover::after{
color:blue;
}
<div id='parent'>
<span>Change child color when you hover</span>
<div id='child'>
Color
</div>
</div>
I know how to collapse (display / hide) a div:
$('#nav').click(function() { $('#hello').toggleClass('hidden'); });
.hidden { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">NAV</div>
<div id="hello" class="hidden">Hello</div>
Is it possible to do this without Javascript / jQuery?
I've tried the main answer from this question, but it is not working, as detailed here.
Nobody has mentioned the 'details' element, which seems perfect for this job.
<details>
<summary>Click to toggle</summary>
<span>Oh, hello</span>
</details>
You may use :checked selector.
#hidden {
display: none;
height: 100px;
background: red;
}
:checked + #hidden {
display: block;
}
<input type="checkbox" id="my_checkbox" style="display:none;">
<div id="hidden"></div>
<label for="my_checkbox">Show/hide</label>
Example fiddle
Well yes, it is, but it's not neat. It involves the :target selector, where you can apply styles to active elements / id's. If we wrap your nav content in a link, we can apply a hashtag which invokes the active rule in our CSS.
Downside, this jumps the page to the location unless prevented by... JavaScript.
a {
color: #000;
text-decoration: none;
}
#hidden {
display: none;
}
#hidden:target {
display: block;
}
<div id="nav">NAV</div>
<div id="hidden">Hello</div>
Lets say I have the following html:
<header class="header">
<div class="title">
<h1>Home</h1>
</div>
<div class="logo">
<img src="#" alt="Logo">
</div>
<div class="account">
<div class="options">
</div>
<div class="search">
</div>
</div>
</header>
And I have the following SCSS:
header {
height: 4.1rem;
div {
width: 33%;
float: left;
height: 4.1rem;
line-height: 4.1rem;
color: #fff;
&.title {
h1 {
font-weight: normal;
font-size: 3rem;
padding: 0;
margin: 0;
}
}
&.logo {
text-align: center;
}
&.account {
}
}
}
Now the problem that I have is that divs options and search are 33% percent of account which is logic as I have div {width: 33%}. I know I can select direct child elements with:
header {
> div {
}
}
But this doesn't help even if I put the > infront of all other classes. I also know I can say that the width should be 0 or what ever again in .account but I would like to prevent this.
Try this:
...
& > div {width: 33%;}
div {
float: left;
height: 4.1rem;
line-height: 4.1rem;
color: #fff;
...
Take out div width and apply it only on direct children. Leave rest as is.
Here is quick fiddle (remove .option and .search styles later, its only for visualisation).
Please edit your question and better explain what exactly you want to achieve.
Use the & with > inside the parent element like this:
.services {
& > div {
margin-bottom: 25px;
}
}
I am not certain I understand you. But I think you want a combination of direct children and child pseudo selectors, in pure CSS:
header > div:first-child {
}
Or, for the second div:
header > div:nth-child(2) {
}
You could also use the not selector:
header > div:not(.account) {
}
to exclude any unwanted div's.
I have no control of the following markup:
<p class="filename">
<img src="http://domain.com/uploads/image_gallery/_thumbs/Chrysanthemum.jpg" alt="Chrysanthemum.jpg">
<br>
Chrysanthemum.jpg
</p>
I would like to do hide from display the <br> Chrysanthemum.jpg part. Is this possible in CSS?
You could use visibility:
p.filename {
visibility: hidden;
}
p.filename img {
visibility: visible;
}
Fiddle
This will do the job for you:
p.filename {
font-size:0;
line-height:0;
}
p br {
display:none;
}
Demo: http://jsfiddle.net/mx74U/
I get a little lost on css stylesheet syntax. My dilemma is that I have four <div> tags with ROUGHLY the same style, except the colors are different or one may float: left but another tag might not have that.
So I was thinking I could add id to all of these so that I can move these style statements into the stylesheet.
How would I address each individual id in the stylesheet? I'm thinking something like div#id or something. Lets assume basic div is already unavailable, but I want some abstract stylesheet tag that at least contains display:block and font-size:11px and then a more specific stylesheet tag to address each <div> tag by its id or class or name.
<div style="display:block; color:steelblue; float:left; font-size:11px;">Open Requests </div>
<div id="openNumber" style="display:block; color:steelblue; font-size:11px; clear:right;">13</div>
<div style="display:block; color:green; float:left; font-size:11px;">Completed Requests </div>
<div id="completeNumber" style="display:block; color:green; float:left; font-size:11px;">13</div>
I get a little turned around on the syntax for different selector types
Thanks for any insight
You could try the following:
css:
.floatLeft { float: left; }
.clearRight { clear: right; }
.open { color: steelblue; font-size: 11px; }
.complete { color: green; font-size: 11px; }
html:
<div id="openRequests" class="open floatLeft">Open Requests </div>
<div id="openNumber" class="open clearRight">13</div>
<div id="completeRequests" class="complete floatLeft">Completed Requests </div>
<div id="completeNumber" class="complete floatLeft">13</div>
A <div> is already a block-level element, so you don't need to specify display: block on it.
You can create a class .numbers(or whatever best describes your grouping of divs) to hold the shared styles, and add that class to the divs in question. Then, target individual divs with their id's for tweaking colors.
Something like this might help:
CSS
.numbers {
/* shared styles */
}
#one {
/* unique styles */
}
#two {
/* unique styles */
}
#three {
/* unique styles */
}
Organizing your styles, in a semantic and meaningful way, can be challenging, but the time you save maintaining your code is well worth it. For a much better summary of how to do this, you can read this article.
I would use multiple classes to group silimar styles together. Try to extract semantic meaning:
Something like this:
CSS:
.block11 { display:block; font-size:11px; }
.left { float:left; }
.clear-right { clear:right; }
.steelblue { color: steelblue; }
.green { color: green; }
HTML:
<div class="block11 steelblue left">Open Requests </div>
<div class="block11 steelblue clear-right" id="openNumber">13</div>
<div class="block11 green left">Completed Requests </div>
<div class="block11 green left" id="completeNumber">13</div>
since the id's have to be unique, you could add an ID to those and then use:
#openRegistration{display:block; color:steelblue; float:left; font-size:11px;}
#openNumber{display:block; color:steelblue; font-size:11px; clear:right;}
#completedRequests{display:block; color:green; float:left; font-size:11px;}
#completeNumber{display:block; color:green; float:left; font-size:11px;}
NOW, given the above, we can simplify it as:
#openRegistration,#openNumber,#completedRequests,#completeNumber{display:block;font-size:11px;}
#openRegistration{ color:steelblue; float:left; }
#openNumber{color:steelblue; clear:right;}
#completedRequests{ color:green; float:left;}
#completeNumber{ color:green; float:left; }
or IF you want, give them a class and use that:
.myClass{display:block;font-size:11px;}
#openRegistration{ color:steelblue; float:left; }
#openNumber{color:steelblue; clear:right;}
#completedRequests{ color:green; float:left;}
#completeNumber{ color:green; float:left; }
EDIT:
or IF you want, give them more than one class and use that:
.myClass{display:block;font-size:11px;}
.complete{ color:green;}
.open{ color:steelblue;}
#openRegistration{ float:left;}
#openNumber{clear:right;}
#completedRequests{ float:left;}
#completeNumber{ float:left; }
<div class="myClass complete" ...
You can define some CSS classes and assign them to your elements according to what you need. Just an example:
CSS:
.myDiv {
display: block;
font-size: 11px;
}
.left { float: left; }
.clear-both { clear: both; }
.steelblue { color: steelblue; }
.green { color: green; }
HTML:
<div class="myDiv left steelblue">Open Requests </div>
<div class="clear-both"></div>
<div id="openNumber" class="myDiv steelblue">13</div>
<div class="myDiv green left">Completed Requests </div>
<div id="completeNumber" class="myDiv green left">13</div>
In this way you can separate your classes and use them only when you really need it.
You can use a class for the similarities, and an id for the differences.
<div class="common" id="some-id"><!-- ... --></div>
CSS:
.common {
display: block;
float: left;
font-size: 11px;
}
#completeNumber {
color: green
}