This is my scss file
.image-container {
position: relative;
.delete-image {
display: none;
position: absolute;
top: 0px;
right: 0px;
}
.make-primary {
display: none;
position: absolute;
top: 0px;
right: 97px;
}
&:hover .delete-image {
display: block;
}
}
I want both .make-primary and .delete-image to have their display attribute be changed to block on hover.
I tried:
&:hover .delete-image .make-primary{
display: block;
}
and
&:hover .delete-image, .make-primary {
display: block;
}
The first one, shows neither element, and the second will show .delete-image on hover and the .make-primary is always shown. Neither of these are showing the .make-primary element on hover.
What is the correct syntax? Thanks
Either put both of the class selectors inside the &:hover:
&:hover{
.delete-image, .make-primary {
display: block;
}
}
That will compile to this
Or add &:hover in front of the second class:
&:hover .delete-image, &:hover .make-primary {
display: block;
}
With the same output.
Related
I'm creating a rating control made of half stars and I want to be able to select odd and even labels inside the .rating control. The selector shoudl look like this but it's not working here is my codepen check my html out while your there
.rating {
label:nth-child(odd)::before {} // not working
}
.rating {
label:nth-child(even)::before {} // not working
}
Full CSS:
#import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
html, body {
margin: 0;
height: 100%;
min-height: 100%;
}
body {
background: #272727;
}
.rating {
position: absolute;
display: inline-block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
label {
font-size: 24px;
font-family: FontAwesome;
color: #afa302;
}
label.half_l::before {
content: '\f006';
display: inline-block;
width: 11px;
overflow: hidden;
}
label.half_r {
width: 12px;
position: relative;
overflow: hidden;
display: inline-block;
margin-right: 3px;
}
label.half_r::before {
content: '\f006';
display: inline-block;
left: -11px;
position: relative;
}
label {
float: right;
}
label:hover {
color: #fff239;
}
> input {
display: none;
}
label.half_l:hover:before,
label.half_l:hover ~ label.half_l:before {
content: '\f089';
color: #fff239;
}
label.half_l:hover ~ label.half_r::before {
content: '\f005';
color: #fff239;
}
label.half_r:hover:before {
content: '\f005';
color: #fff239;
}
label.half_r:hover ~ label.half_r::before,
label.half_r:hover ~ label.half_l:before {
content: '\f005';
color: #fff239;
}
input[type=radio]:checked ~ label.half_l:before,
input[type=radio]:checked ~ label.half_r:before{
content: '\f005';
}
}
Use nth-of-type instead of nth-child
label:nth-of-type(odd) {
background-color:red;
}
nth-child looks for all children, regardless their type, where nth-of-type looks for a certain type
If to use the nth-child selector you need to bypass the input's since it count all children no matter their type
The nth-child(4n+4) start from the 4:th element (your second label) and then counts to every 4:th and apply the rule, which in your case will be every even label
The nth-child(4n+2) start from the 2:nd element (your first label) and then counts to every 4:th and apply the rule, which in your case will be every odd label.
Note, one can also use nth-child(4n) instead of nth-child(4n+4), which will start from the 0:th element (which does not exists) and then counts to every 4:th.
.rating {
label:nth-child(4n+4)::before {
background: yellow;
}
}
.rating {
label:nth-child(4n+2)::before {
background: blue;
}
}
Updated codepen
I currently have this code which turns the footer titles and subtitle white when a footer cell is hovered over, and it works:
.footer-cell {
position: relative;
display: table;
height: 160px;
&:hover .footer-title { // footer-title line
color: white;
}
&:hover .footer-subtitle { // footer-subtitle line
color: white;
}
}
Is there any way that I can combine the footer-title line and the footer-subtitle line so I dont have duplicate code? I tried this but it doesn't work:
.footer-cell {
position: relative;
display: table;
height: 160px;
&:hover .footer-title, .footer-subtitle {
color: white;
}
}
Just wrap the selectors in the :hover class:
.footer-cell {
position: relative;
display: table;
height: 160px;
&:hover{
.footer-title, .footer-subtitle {
color: white;
}
}
}
Compiles to this
I have a date input that I've styled but I can't remove a blue highlight.
Here is a pen:
http://codepen.io/pjrundle/pen/PqjKBZ
<input id="selectedDate" type="date" class="date-filter pseudo-input live-update" placeholder="Event Date">
::-webkit-inner-spin-button {
display: none;
}
::-webkit-clear-button {
display: none;
-webkit-appearance: none;
}
::-webkit-calendar-picker-indicator {
opacity: 0;
height: 14px;
width: 80px;
border: 1px solid green;
z-index: 2;
position: absolute;
left: 9px;
top: 8px;
}
so when you click on the input, the first element should not go blue. Does anyone know how to do this?
The first element goes blue to indicate that it is the active element (in case you want to update the date using the keyboard), you can style it by specifying that it should not have a background using the pseudo-elements:
::-webkit-datetime-edit-month-field
::-webkit-datetime-edit-day-field
::-webkit-datetime-edit-year-field
Notice: you should style not only the month, but all three elements (day/month/year) as you don't know which date format the user's computer will have. The code would be like this:
::-webkit-datetime-edit-month-field { background: none; }
::-webkit-datetime-edit-day-field { background: none; }
::-webkit-datetime-edit-year-field { background: none; }
And your example would look like this:
::-webkit-datetime-edit-month-field { background: none; }
::-webkit-datetime-edit-day-field { background: none; }
::-webkit-datetime-edit-year-field { background: none; }
::-webkit-inner-spin-button {
display: none;
}
::-webkit-clear-button {
display: none;
-webkit-appearance: none;
}
::-webkit-calendar-picker-indicator {
opacity: 0;
height: 14px;
width: 80px;
border: 1px solid green;
z-index: 2;
position: absolute;
left: 9px;
top: 8px;
}
<input id="selectedDate" type="date" class="date-filter pseudo-input live-update" placeholder="Event Date">
Check this question for a list of all the pseudo-elements that you can use.
I have the following case generated by a plugin which I am not able to rewrite as I would need to fix this. It generates breadcrumbs for a website like the following example:
<li><a>Parent</a></li>
<li><a>Subparent</a></li>
<li><a>Subsubparent</a></li>
<li>Current Site</li>
I have styled the links to be clickable more easy
li {height: 40px;}
li a {padding: 5px; display: inline-block; height: 30px;}
Now of course the last element does not get the same padding and looks wired. I am not able to wrap a html element like span around it in php.
Is there a css selector to select the text inside of an element, without affecting the element itself? Or wraps an html element like span around it, something like
li:last-child::before {content:"<span>"}
Every hint appreciated! If someone likes jsfiddle here is one to play with.
Why don't you just add the padding to the last li together with the anchors?
Updated JsFiddle
li a, li:last-child {padding: 10px; display: inline-block;}
I have created the following work-around to get the right styling.
li:last-child::before {
content: "";
opacity: 0;
display: inline-block;
margin: 10px 0 10px 10px;
}
li:last-child::after {
content: ".";
opacity: 0;
display: inline-block;
margin: 10px 10px 10px 0;
}
Sadly one of the both pseudo elements needs content:"." or another real content. This is a solution to target spacing (margin/padding) without changing some css/html.
Updated jsfiddle
Still I would love to see clean css solutions!
My own suggestion, at its simplest, would be:
li {
height: 40px;
/* vertically-aligns the text to
the same 'line': */
line-height: 40px;
/* to display in a row, given the
text-alignment I assume this is required,
remove/adjust if not: */
float: left;
/* removes the bullets: */
list-style-type: none;
/* Just to clearly show the size of
the <li> elements: */
background-color: #ffa;
}
li:nth-child(odd) {
/* again, just to show the size: */
background-color: #f90;
}
li a {
/* to fill the whole of the <li>: */
display: block;
}
li a:hover {
/* just to show the hover 'hit-area': */
background-color: #f00;
transition: background-color 0.4s linear;
}
li {
height: 40px;
line-height: 40px;
float: left;
list-style-type: none;
background-color: #ffa;
}
li:nth-child(odd) {
background-color: #f90;
}
li a {
display: block;
}
li a:hover {
background-color: #f00;
transition: background-color 0.4s linear;
}
<ul>
<li>Parent
</li>
<li>Subparent
</li>
<li>Subsubparent
</li>
<li>Current Site</li>
</ul>
Now, to style them as 'breadcrumbs,' you could use generated content to provide
the separators, for example, you can update the CSS:
li {
/* other rules remain the same,
this is added to provide space
for the generated content: */
margin-left: 1em;
}
/* there is (usually) no marker before
the first breadcrumb, this removes its
space: */
li:first-child {
margin-left: 0;
}
/* other rules that, remain the
same, are excised for brevity */
li::before {
/* unicode for the guillemot,
'ยป', character: */
content: '\00BB';
/* to position easily and prevent
altering the position of the child
<a> elements: */
position: absolute;
/* simple means to move the generated
content off the left edge: */
right: 100%;
width: 1em;
text-align: center;
}
/* no marker the first breadcrumb: */
li:first-child::before {
/* removing both content and width: */
content: '';
width: 0;
li {
height: 40px;
line-height: 40px;
position: relative;
margin-left: 1em;
float: left;
list-style-type: none;
}
li:first-child {
margin-left: 0;
}
li a {
display: block;
}
li a:hover {
background-color: #f00;
transition: background-color 0.4s linear;
}
li::before {
content: '\00BB';
position: absolute;
right: 100%;
width: 1em;
text-align: center;
}
li:first-child::before {
content: '';
width: 0;
}
<ul>
<li>Parent
</li>
<li>Subparent
</li>
<li>Subsubparent
</li>
<li>Current Site</li>
</ul>
I have written some code to help "skin" checkboxes and radio buttons using only CSS. It works very, very well ...
.... in Chrome.
However in FireFox and IE, it just ...fails outright. And I have absolutely no earthly idea why. The basic gist of it is that it loads a block using :before before the content and then places it over the default element. Of course it will be replaced with a sprite, but I have to get the outlaying behavior to function first. The code works like this; The way it is laid out in HTML is because I am using Bootstrap, and I am just adhering to the way it lays form fields out. I also have a Fiddle to demonstrate the problem.
Samples
jsBin
Includes the original LESS content.
jsFiddle
Only compiled CSS
HTML
<div class="checkbox">
<label>
<input type="checkbox" value="">
<span style="font-size: 24px;">Option</span>
</label>
</div>
LESS/CSS
.checkbox, .radio {
position: relative;
& + .checkbox {
margin-top: 10px;
&.pull-left {
left: 6px;
}
}
& + .radio {
margin-top: 10px;
left: 20px;
}
input[type="checkbox"] {
&:active, &:hover, &:focus {
&:before,
&::before {
background: yellow;
}
}
&:checked,
&:active:checked,
&:hover:checked,
&:focus:checked {
&:before, &::before {
background: green;
}
}
}
input[type="radio"] {
&:active:before,
&:hover:before,
&:focus:before {
background: yellow;
}
&:checked:before,
&:active:checked:before,
&:hover:checked:before,
&:focus:checked:before {
background: green;
}
}
input[type="radio"] {
&:before, &::before {
opacity: 1;
position: absolute;
content: "";
display: block;
background: black;
height: 24px;
width: 24px;
top: 2px;
}
}
input[type="checkbox"] {
&:before, &::before {
opacity: 1;
position: absolute;
content: "";
display: block;
background: black;
height: 24px;
width: 24px;
top: 2px;
}
}
label {
line-height: 24px;
padding-left: 10px;
}
}
Old browsers unfortunately aren't able to style radio buttons. What you should do is to use a plugin like http://fronteed.com/iCheck/ which automatically creates div based checkboxes that you can style on your own and clicking on those sync with the actual checkboxes.