I’m practising some codepen projects , in one project they used a .class{} inside another .class{} for example-
Code
.cube{
width:2em;
height:2em;
.side{
width:100%;
height:100%;
background:#;
}
}
Seemed to work fine for them. It doesn’t work for me , exact same text editor , exact same code . What is happening ?
And also , what is the above mentioned thing called ? And how does it work ?
That CSS structure implies that they're using a CSS preprocessor, such as LESS or SASS.
Currently such syntax isn't valid CSS, though the CSS Nesting Module is currently in working draft status; so it will – likely – be implemented in the future.
It's worth noting that, while nesting syntax is being developed for CSS, that syntax is different; from the previously-linked documentation:
table.colortable {
& td {
text-align:center;
&.c { text-transform:uppercase }
&:first-child, &:first-child + td { border:1px solid black }
}
& th {
text-align:center;
background:black;
color:white;
}
}
Would be equivalent to:
table.colortable td {
text-align:center;
}
table.colortable td.c {
text-transform:uppercase;
}
table.colortable td:first-child, table.colortable td:first-child+td {
border:1px solid black;
}
table.colortable th {
text-align:center;
background:black;
color:white;
}
Related
I have something like
.padding-top {
10px;
}
.padding-upper {
1px;
}
<div class="padding-top padding-upper"></div>
Which will be prioritized? Is it random or is there a chronological order here?
I have tested the code and checked that there is only 1px applied, even if I try to interchange the order of the like so:
<div class="padding-upper padding-top"></div>
Only 1px is applied. Can someone enlighten me on this one?
Yes, it is applied by order. Try this because your classes are not defined properly (missing padding properties):
.padding-top {
padding-top: 10px;
}
.padding-upper {
padding-top: 1px;
}
div {
height: 100px;
background-color: red;
}
<div class="padding-top padding-upper"></div>
It will be applied by chronological order how you declared classes. Because you have padding-top class first declared it will be overwritten. It will be overwritten by class padding-upper which is declared after.
If you change the order of declaration, style of div element will be changed too. But if you change order in class attribute then style will remain same.
But if you have the situation that you want to keep original value you can achieve with !important for that property:
.padding-top {
padding-top: 10px !important;
}
.padding-upper {
padding-top: 1px;
}
Now order for padding-top property doesn't matter. 10px will be always applied because it is decorated with !important.
Actually, The css will overrides based on the specificity level. In the below snippet. div.padding-upper is more specific than others. For more info: https://www.w3.org/TR/CSS21/cascade.html
.padding-top {
padding:10px;
width:20px;
height:20px;
background:red;
}
.padding-upper {
padding:1px;
width:20px;
height:20px;
background:red;
}
div.padding-upper {
padding:100px;
width:20px;
height:20px;
background:red;
}
<div class="padding-top padding-upper"></div>
But in your case, both selectors are in same level. So, the recent rule will be applied.
.padding-top {
padding:10px;
width:20px;
height:20px;
background:red;
}
.padding-upper {
padding:1px;
width:20px;
height:20px;
background:red;
}
<div class="padding-top padding-upper"></div>
If you want to override that above default behavior you have to use !important.
.padding-top {
padding:10px !important;
width:20px;
height:20px;
background:red;
}
.padding-upper {
padding:1px;
width:20px;
height:20px;
background:red;
}
<div class="padding-top padding-upper"></div>
Order does matter. The last declared value of multiple occurrence will be taken.
Css works the way it is written. So if you are taking two classes in your html:
<div class="padding-upper padding-top"></div>
The class which is written at last in the css:
.padding-top {
10px;
}
.padding-upper {
1px;
}
Will execute first no matter how you interchange them in your html.
Below is a simple example of the same-
.demo {
color: blue;
}
.demo1 {
color: red
}
.demo2 {
color: green
}
<div class="demo demo2 demo1 ">Hello World!!</div>
Switching from tables to divs for layout purposes sounds an attractive decision, yet it's very painful. I haven't still been able to use float and oveflow properly to get divs aligned properly. Here are I have the following html and css:
HTML
<div class="div-row">
<div id="divOfficers" class="div-column">DIVOFFICERS</div>
<div id="divTasks">DIVTASKS</div>
CSS
.div-row {
width:100%;
overflow:clear;
margin-bottom:5px;
}
.div-column {
margin-right:3px;
float:left;
}
#divOfficers {
border:3px solid red;
height:80px;
width:200px;
color:red;
}
#divTasks{
width:300px;
height:80px;
border:10px solid orange;
color:orange;
}
Basically, I need the divTasks to stand right to the divOfficers, but without stretching over it. But here's what I get:
I've cleared the overflow in the parent div but as you can see that does not help. What else do I have to do?
just give a float:right to divtasks as well as you did float:left with divofficers. if it is what you want than your problem solved or let me know if you need something else to do and put your code on jsfiddle please as it will help a lot
Try use CSS3 code, If you use float maybe have problem with long content
.div-row {
width:100%;
overflow:clear;
margin-bottom:5px;
display: table;
}
.div-column {
margin-right:3px;
}
#divOfficers {
border:3px solid red;
height:80px;
width:200px;
color:red;
display: table-cell;
}
#divTasks{
width:300px;
height:80px;
border:10px solid orange;
color:orange;
display: table-cell;
}
Demo: http://jsfiddle.net/vsok/dqmdv7oa/
Yeah, my titles suck :p
So I have a container, which contains <div>s. Dotted in this container are <span>s that mark off labels. These <span>s have position:absolute to make them not interfere with the layout of the <div>s.
#container {
border:1px solid red;
width:270px;
}
#container>div {
display:inline-block;
width:80px;
height:80px;
border:1px solid blue;
margin:4px;
}
#container>span {
position:absolute;
background:#ccf;
}
<!-- Please forgive the lack of spaces - this DOM is dynamically generated -->
<div id="container"><span>Marker</span><div></div><div></div><span>Marker</span><div></div><span>Marker</span><div></div><div></div></div>
In Internet Explorer, this works fine.
In Chrome, it does not. The label falls out of the box.
I understand why this happens - it's because the <span> has zero width and height within the flow of the document, allowing it to squeeze into the zero remaining space.
But I'm wondering if there's any other way to achieve the effect I want here?
EDIT: Desired effect, Chrome's bad effect
don't really quite get where you want them, something like this ? added display block to the span.
#container {
border:1px solid red;
width:270px;
}
#container>div {
display:inline-block;
width:80px;
height:80px;
border:1px solid blue;
margin:4px;
}
#container>span {
display:block;
position:absolute;
background:#ccf;
}
<!-- Please forgive the lack of spaces - this DOM is dynamically generated -->
<div id="container"><span>Marker</span><div></div><div></div><div></div><span>Marker</span><div></div><div></div></div>
strong text
Borrowing ideas from #Billy and with help from #JacobGray in the comments, the following solution applies display:block to <span>s, but only if the immediately follow an Nth <div>, N being the number of columns.
It works, but I'm not too happy with it being dependent on a constant number of columns - not great for responsive design ;) Better solutions are of course welcome.
#container {
border:1px solid red;
width:270px;
}
#container>div {
display:inline-block;
width:80px;
height:80px;
border:1px solid blue;
margin:4px;
}
#container>span {
position:absolute;
background:#ccf;
}
#container>div:nth-of-type(3n)+span {
display:block;
}
<!-- Please forgive the lack of spaces - this DOM is dynamically generated -->
<div id="container"><span>Marker</span><div></div><div></div><span>Marker</span><div></div><span>Marker</span><div></div><div></div></div>
Adding display:block to the span is what I'd suggest, or putting a marker span inside every div you want to label.
If I understand well, try this. Put tags <span> into each <div> that you want have a "label". Add position:relative to all <div> and set the properties top and left for the span.
Ps. I've modified your code below, but you should use classes
#container {
border:1px solid red;
width:270px;
}
#container>div {
display:inline-block;
width:80px;
height:80px;
border:1px solid blue;
margin:4px;
position: relative;/* added */
}
#container>div>span {/* modified */
position:absolute;
background:#ccf;
top:-5px;/* added */
left:-5px;/* added */
}
<div id="container"><div><span>Marker</span></div><div></div><div><span>Marker</span></div><div><span>Marker</span></div><div></div></div>
I don't understand why does this work :
.button:active {
position:relative;
top: 2px;
left:2px;
}
But this wont work :
.button:hover {
font-size:17px;
}
It works when I use id but I want it to activate for all buttons :
#btnhome:hover{
font-size:17px;
}
This works fine but with class it wont? What am I doing wrong?
Using id and it works so sure something has to do with the specificity, over riding, try this
Demo
Demo + !important
.button:hover {
font-size:17px !important; /* Actually you don't even need !important */
}
Try:
.button *:hover { font-size:17px; }
Definitely there is an external .css file included by you via using link tag, in which .button:hover {font-size:somethingelse !important;} is defined. That's why you can't change it unless using !important again.
It is specificity. The ID is taking precedent over the pseudo style. You need to either re-write the CSS to be more general, and only put the unique values on the IDs or use the IDs plus the pseudo selector.
I took the common stuff from the ID's and moved them to a base .button class:
.button{
width: 84px;
height: 46px;
background-color:#000;
border: none;
color: white;
font-size:14px;
font-weight:700;
}
.button:hover {
font-size:17px;
}
Check out this fiddle to see it in action: http://jsfiddle.net/kJfmR/
If anyone is still facing the same problem:
I had one similar to the above, my code was like this:
<style>
.btto:hover{
background-color: grey ;
cursor: pointer;}
</style>
<body>
<button class="btto" style="color:white;
background-color:black;
padding:4%;
width:50%;
border:none"> Buy Tickets </button>
</body>
I think background-color of button inside body was overriding the one inside style
so what i did was:
<style>
.btto{
color:white;
background-color:black;
padding:4%;
width:50%;
border:none;
}
.btto:hover{
background-color: grey ;
cursor: pointer;
}
</style>
<body>
<button class="btto">Buy Tickets</button>
</body>
I need to pad just one cell in my table. I gave the td element a class and defined the class in my CSS file like this
.itemQuantity
{
padding-right:30px;
text-align:right;
background-color: #EEE;
}
Padding-right does not seem to be doing anything.
I changed the css to
td.itemQuantity
{
padding-right:30px;
text-align:right;
background-color: #EEE;
}
Now it works.