Is there any possibility to summarize CSS Selectors?
This is my stylesheet:
form.image_form > div > label > img
{
display: block;
margin-left: auto;
margin-right: auto;
}
form.image_form > div
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 100%;
height: 156px;
display: table-cell;
vertical-align: middle;
}
form.image_form > div:hover
{
background: green;
}
form.image_form > input[type="radio"]
{
display: none;
}
form.image_form > input[type="radio"]:checked + div
{
background: red;
}
and something like this is what I'd like to archieve:
form.image-form
{
> div
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 100%;
height: 156px;
display: table-cell;
vertical-align: middle;
> label > img
{
display: block;
margin-left: auto;
margin-right: auto;
}
:hover
{
background: green;
}
}
> input[type="radio"]
{
display: none;
:checked + div
{
background: red;
}
}
}
So is there any possibility to combine/summarize/interlace this code?
(I apologize if it looks like I did no research, I indeed did but couldn't fine anything in w3c documentation. Maybe I didn't use the right search terms.)
With "pure" CSS this isn't possible. But there are little helpers like LESS or SASS which will help you achieving this.
Nested selectors are not allowed in the CSS3 specification. It's a shame, because it would help to organise CSS files.
You can use preprocessed CSS files instead like SASS.
You need to use CSS pre-processors like SASS and LESS to achive what you are looking for. It cannot be done with pure CSS.
Related
Using SCSS and have a nested element which I am trying to nest an nth-of-type() rule into but it hasn't worked anyway I type it. I want every odd el_header element to be white text and every even one to be black.
.el {
height: 500px;
width: 500px;
&_header {
height: 100%;
width: 10%;
background: #555;
display: inline-block;
line-height: 500px;
text-align: center;
&nth-of-type(odd) {
color: black;
}
&nth-of-type(even) {
color: white;
}
}
}
DEMO
You just forgot the : after &.
Use
&:nth-of-type(odd){...}
&:nth-of-type(even){...}
and it will work.
See updated fiddle
Searching I can only find javascript/jquery solutions, isn't there any way to do it purely with css?
#UserMenu.block {
display: block;
}
#UserMenu {
font-size: 16px;
padding: 15px;
display: none;
background: #333;
position: absolute;
left: 10px;
width: 200px;
}
#UserMenu a {
color: #24A9D8;
display: block;
position: relative;
padding: 5px 10px;
}
You can test it here:
http://jsfiddle.net/hLch3jku/
You can use checkbox for trick. Put a label and checkbox in it. Put your other elements. And when checkbox is checked hide your elements with css. But this is a cheap trick, better use javascript.
I've got some Sass I've inherited that looks like below. I want to be able to specify a CSS tag to differentiate between green and another color (see anchor tag and comment).
Now, I have-
<div class="names"></div>
The link shows green. I want to be able do something like-
<div class="names myblue"></div>
And instead have it be a different color.
&.SpeakerCount3 {
.names {
text-align: center;
li {
text-align: center;
display: inline-block;
width: 82px;
margin-left: 5px;
&:first-child {
margin-left: 0;
}
}
img {
max-width: 100%;
}
h3 {
margin-top: 0;
a {
font-size: 10px;
}
}
}
}
.names {
min-height: 180px;
.photo {
margin-top: -21px;
}
img {
display: block;
border: 3px solid #282828;
margin: 0 auto;
}
h3 {
margin-top: 5px;
}
a {
font-size: 20px;
color: #5c5c5c; // this was green but I could not figure how to make it orange for css and green for kids
text-decoration: none;
}
}
.description {
margin-bottom: 15px;
min-height: 120px;
h3 {
margin: 5px 0 20px 0;
min-height: 40px;
}
}
Having seen the HTML code that was being hidden in your question, I should say that good class names generally should relate to state rather than properties - so the class name "myblue" should probably be replaced with something like "featured", "highlighted" etc. This is especially the case where you are asking for "myblue" to actually change the colour to Orange - something that may well confuse future maintainers. In the case that "myblue" is a company or feature name it may well be legitimate, but I would consider carefully if there is an alternative class name which does not include a colour name.
In Sass you could do something like-
a {
font-size: 20px;
color: #5c5c5c; // this was green but I could not figure how to make it orange for css and green for kids
text-decoration: none;
.myblue & {
color: orange;
}
}
As the "a" selector is contained within the ".names" selector though, this will result in a rendered rule of-
.myblue .names a {
color: orange;
}
As "names" is not a descendant of "myblue" in your DOM, the selector will not match - and this isn't what you want.
If you only want the rule to apply where both "names" and "myblue" are present I would write this-
.names {
min-height: 180px;
.photo {
margin-top: -21px;
}
img {
display: block;
border: 3px solid #282828;
margin: 0 auto;
}
h3 {
margin-top: 5px;
}
a {
font-size: 20px;
color: #5c5c5c; // this was green but I could not figure how to make it orange for css and green for kids
text-decoration: none;
}
&.myblue {
a {
color: orange;
}
}
}
The ampersand produces a combined selector, rather than the descendant selector you would get with a space (this is Sass only - not valid CSS).
Alternatively, if you want the "myblue" class selector to apply even without the "names" class, then simply do this-
.names {
min-height: 180px;
.photo {
margin-top: -21px;
}
img {
display: block;
border: 3px solid #282828;
margin: 0 auto;
}
h3 {
margin-top: 5px;
}
a {
font-size: 20px;
color: #5c5c5c; // this was green but I could not figure how to make it orange for css and green for kids
text-decoration: none;
}
}
.myblue {
a {
color: orange;
}
}
As the "myblue" selector appears after the "names" selector, the color property for the link will override the color set in "names" - leaving all other properties for the link and other elements intact. This solution simply utilises the CSS cascade to achieve the desired effect.
I'm working in the main page of www.recaccesorios.com and I'm struggling with a padding. The vertical distance between two elements is too big and I don't know why is doing that. I'll show you the inspection with Google Chrome:
As you can see, Chrome is telling me that the top padding is 0 or null, but in the image you can see that it isn't true. What is happening?
My horrible CSS (not the whole CSS, I can't put here more than 3000 lines...):
#galeria {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background-color: rgb(222,222,222);
background-color: rgba(222,222,222,0.8);
border: 1px solid #e5e5e5;
border-radius: 4px;
/* padding-bottom: 40px; */
width: 100%;
}
#galeria > h5 {
text-align: center;
}
#noticias > h5 {
text-align: center;
}
#noticias a {
color:#555;
}
#noticias p {
text-align : justify;
padding-left:12px;
padding-right:12px;
}
#noticias {
height:292px;
}
#vistaPrevia {
position: absolute;
z-index: 6;
top: 40px;
display: none;
}
#galeria > img {
display: block;
margin-left: auto;
margin-right: auto;
}
#galeria > span {
margin-left: 5px;
}
#noticias {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background-color: rgb(222,222,222);
background-color: rgba(222,222,222,0.8);
border: 1px solid #e5e5e5;
border-radius: 4px;
/* padding-bottom: 40px; */
width: 100%;
}
.td-galeria {
padding-right: 6px;
padding-left: 0px;
border-color:transparent;
width:50%;
height:300px;
}
.td-noticias {
padding-left: 6px;
padding-right: 0px;
}
I believe the issue is the reset on line 42 of the CSS file vertical-align: baseline; this seems to be causing your chrome issues.
This solves the issue:
#tablaInicio td {vertical-align:}
But it is strange.
EDIT:
Found out why it is strange; it is a JS script causing the extra height.
The Problem exists in line 42 of Style.css;
remove vertical-align:baseline;
and also correct
#tablaInicio td {vertical-align:}
We need to see your CSS to understand this better. But, I'm guessing you've declared the padding somewhere else in your code.
In your CSS file, change the padding value line to something like this:-
"padding: 0px !important";
the !important message means it will ignore any other values you try to set for padding.
I hope this helps.
This is part of a more complex dynamic template code so I'm trying to keep the structure as is but trying to style the text so that the cast members line up with the directors below.
Right now the cast gets wrapped to 3 lines but it does not keep its indenting. Anyone know how I could style it to hold its indented look.
http://jsfiddle.net/N2y88/
http://jsfiddle.net/N2y88/2/
try something like this
.support p span:first-child {
color: #81848A;
display: inline-block;
padding-right: 10px;
text-align: right;
width: 50px;
float:left;
}
.support p span:last-child {
display: inline-block;
float:left;
width:400px;
}
.support .cast, .support .director{
color:blue;
}
.support p {
color: #D0D0D0;
margin: inherit;
padding: 0.1em 0;
clear:both;
}