Why isn't my first-child selector working in Less?
.leftPanel{
margin:20px;
float:left;
display:inline;
width:620px;
margin-left:10px;
select{
width:300px;
&:first-child{
margin-right: 30px;
}
}
}
You are specifying that if the first child element inside a .leftPanel is a <select>, it should have margin-right: 30px;. If you are trying to apply this rule to the first child element inside the <select> (which should always be an <option>), try replacing &:first-child with option:first-child.
Related
I'm trying to achieve this in CSS:
I would like the green line to always be the width of the text (no fixed width). I have a constraint, the tex is contained in an H3 tag with no ability to add a span tag inside it.
you could maybe try this aproach also:
<div class="container">
<div class="line"></div>
<h3>RECENT EPISODES</h3>
</div>
.container {
width:100%;
position:relative;
}
h3 {
display:inline-block;
border-bottom:1px solid green;
padding-bottom:10px;
margin:0;
position:relative;
}
.line {
height:1px;
background-color:#ededed;
width:100%;
position:absolute;
bottom:0;
}
http://jsfiddle.net/az6pr1mz/
The grey line needs to go on a block level tag while the green needs to go on an inline tag. This means that you need two nested tags for it to work and that you must either add a span inside the h3 or a div surrounding it. An h3 can always be made inline if needed.
A slightly different approach would be to add the secondary element outside the h3 without surrounding it and position that so it lies directly under the h3.
In any case, you will need a minimum of two elements for the borders to cling to.
Update:
I missed that you don't need span inside the h3. I added a workaround. I am not sure whether this is the only solution. But I think it can be improved though. In the below code, I am using css content property to hide the border of the container.
NOTE: Use as many dots . as you can use to make it work on all resolutions.
CSS
.container {
border-bottom: 1px solid red;
padding-bottom: 10px;
position: relative;
max-width: 100%;
word-break: break-all;
}
.container:after {
content:"....................................................................................................................";
color: transparent;
border-bottom: 1px solid green;
padding-bottom: 10px;
position: absolute;
bottom: -1px;
}
Working Fiddle
For example this code: (is clearly and not uses absolute positions)
HTML:
<h3><span>Recent episodes</span></h3>
CSS:
h3{
text-transform:uppercase;
border-bottom:1px solid #ccc;
}
h3 span{
display:inline-block;
border-bottom:1px solid #080;
margin:0 0 -1px 0;
}
http://jsfiddle.net/tp0nnapu
Is it possible to display:block; the :after pseudo-element when I hover over the parent element itself?
#myDiv{
position:relative;
width:50px;
height:50px;
border-style:solid;
background-color:red;
}
#myDiv:after{
position:absolute;
content:"";
display:none;
width:50px;
height:50px;
border-style:solid;
background-color:blue;
}
I have tired:
#myDiv:hover #myDiv:after{
display:block;
}
#myDiv:hover + #myDiv:after{
display:block;
}
#myDiv:hover > #myDiv:after{
display:block;
}
Yet no luck, here's a fiddle.
Change it to #myDiv:hover::after
You can use either :after or ::after but in the selectors module (3) it states that the latter is now intended to be used to distinguish them from pseudo-classes
You are trying to reference the same element, so you don't need to duplicate the ID selector. No need to use the child selector either, just use:
#myDiv:hover:after {
display: block;
}
jsFiddle Demo
I'm trying to achieve the separator effect using border-right on my menu.
Here's my css code
ul.navigation li a {
text-decoration:none;
float:left;
width:252px;
height:50px;
display:block;
background-color:#ccc;
text-align:center;
line-height:45px;
color:#000;
position:relative;
border-right:1px solid #333;
}
ul.navigation li a:last-child {
border:none;
}
What am I doing wrong? I tried border-left and :first-child too.
I am thinking you mean to do this
ul.navigation li:first-child a
Because every a is the first child of its parent li. You mean the a inside the first li item. :)
Your CSS snippet is full of bad practices.
Below is an example of how you should style it and how you can add a separator between each list item.
.navigation { overflow: hidden; } /* Explanation 1 */
.navigation li { float: left; }
.navigation li + li { /* Explanation 2 */
border-left: 1px solid #333;
}
.navigation li a {
display: block;
width: 252px; /* Explanation 3 */
padding: 5px 0; /* Explanation 4 */
background-color:#ccc;
color:#000;
text-align:center;
}
Float containment: read this article.
Here I answer your question: applies a border left from the 2nd li to the last one, using the adiacent sibling selector +.
Are you sure you want to have a fixed width?
No fixed height and line-height to vertically align the text. line-height doen't need a unit by the way. Read this article.
Here is a live example: http://dabblet.com/gist/4968063
I have a whole bunch of checkboxes and want to style all the ones that are even children i.e 2nd, 4th, 6th, 8th.
I have tried doing the following but to no avail.
.basic li > div .choices input[type="checkbox"] {
width:14px;
height:14px;
float:left;
border:0 none;
background:#fff;
padding:0;
}
.basic li > div .choices input[type="checkbox"]:nth-child(2n-1) {
margin:0px 0px 0px 60px;
}
Use :nth-child(even) or :nth-child(2n+0) (any calculation resulting in an even integer) according to:
http://www.w3.org/TR/css3-selectors/
I'm pretty new to CSS but I'm hoping this is just something obvious I'm missing.
On www.sonogenics.co.uk, the Twitter block appears to be floated to the right or have 40px left margin. I have explicity set the margins to be 0px and cleared the floats etc but there has been no effect. From the Firefox WebDeveloper addon, it appears to be a problem with the .tweet ul but I can't seem to fix it. Can someone explain to me what is going on?
Cheers
Chris
It actually has left-padding and not margin. This is the default styling of a ul element. To cancel it, you should put padding:0; in the #tweet ul style declaration.
A couple of suggestions:
Use Firebug for development, it is far superior to the WebDeveloper add-on. I was able to immediately spot the problem using it
Use a CSS reset stylesheet, to remove those default style declarations and normalize it across browsers (the defaults are not consistent between browsers). The best known is the CSS reset by Eric Meyer, which I personally use on every site I develop.
#chris robinson; i checked your twitter/style.css your main problem is that you declare css wrongly that why the properties are not working.
wrong css declaration :
.twitter #tweets {
background: #111;
padding: 0 0px;
padding-bottom:20px;
text-align:left;
-moz-border-radius: 5px;
border-radius: 5px;
border-color:#AAA;
border-style:solid;
border-width:2px;
margin:0px;
}
.twitter ul, li {
list-style-type: none;
background: #222;
-moz-border-radius: 5px;
border-radius: 5px;
border-color:#AAA;
border-style:solid;
border-width:1px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
margin:0px;
-webkit-padding-start:10x;
}
.twitter #tweets a {
color: #AAA;
text-decoration:none;
}
.twitter #tweets a:hover {
color: #AAA;
}
if you check your html your twitter class is inside #tweets not outside of it . So, first correct your css .
Correct css:
#tweets .twitter {
background: #111;
padding: 0 0px;
padding-bottom:20px;
text-align:left;
-moz-border-radius: 5px;
border-radius: 5px;
border-color:#AAA;
border-style:solid;
border-width:2px;
margin:0px;
}
#tweets ul.twitter li {
list-style-type: none;
background: #222;
-moz-border-radius: 5px;
border-radius: 5px;
border-color:#AAA;
border-style:solid;
border-width:1px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
margin:0px;
-webkit-padding-start:10x;
}
#tweets .twitter a {
color: #AAA;
text-decoration:none;
}
#tweets .twitter a:hover {
color: #AAA;
}
This should fix it
#tweets ul { padding: 0px; }
uls have a left padding by default in most browsers (i.e. WebKit 40px).
Your styling isn't being applied because of your css selector. Your selector is
.twitter ul, li {}
while your html for the elements are
<div id="tweets">
<ul class="twitter">...</ul>
</div>
Your css selector says "style all ul and li that are descendents of any element with the 'twitter' class". Since the ul isn't contained in an ancestor element with the "twitter" class, it isn't being styled with that rule.
If you want the rule to actually apply, you can either just use the selector
.twitter {...}
or you can re-class the parent div with "twitter",
<div id="tweets" class="twitter">
<ul class="twitter">...</ul>
</div>
or you can use this selector instead,
#tweets ul, li {...}
which more closely matches your original selector.