I have a div called "divContainer" inside which i have few input elements like textboxes,radio buttons et..
How can i define the style for then in the CSS ? I wanna mention styles for elements inside this purticular div.not for the entire form.
Ex: For textboxes i need width as 150px;
For Radio buttons i need width of 20px;
You can define style rules which only apply to specific elements inside your div with id divContainer like this:
#divContainer input { ... }
#divContainer input[type="radio"] { ... }
#divContainer input[type="text"] { ... }
/* etc */
CSS 3
divContainer input[type="text"] {
width:150px;
}
CSS2
add a class "text" to the text inputs then in your css
.divContainer.text{
width:150px;
}
Like this.
.divContainer input[type="text"] {
width:150px;
}
.divContainer input[type="radio"] {
width:20px;
}
When you say "called" I'm going to assume you mean an ID tag.
To make it cross-brower, I wouldn't suggest using the CSS3 [], although it is an option. This being said, give each of your textboxes a class like "tb" and the radio button "rb".
Then:
#divContainer .tb { width: 150px }
#divContainer .rb { width: 20px }
This assumes you are using the same classes elsewhere, if not, this will suffice:
.tb { width: 150px }
.rb { width: 20px }
As #David mentioned, to access anything within the division itself:
#divContainer [element] { ... }
Where [element] is whatever HTML element you need.
Related
I want to set a width of span element within 'select2-container' class if its outside any table
I try with this code but it doesn't work it will select all span elements even if it's inside a table.
body *:not(table) .select2-container {
width: 100% !important;
}
I also try with body *:not(td) .select2-container {... but it also not worked.
you need to redifine class one more time,
.select2-container {
width: 100% !important;
}
table .select2-container {
width: unset;
}
I have a code that I can't change:
item.left,
item.centre,
item.right{
.MIXIN();
}
.MIXIN(){
width: 100px;
}
I need to apply width only to .right element. I can only change contents of MIXIN(). I was thinking of using &but it will result either in .right item.right or item.right .right which is not what I want. Is there a way to apply styling only for .right element using contents of MIXIN()?
You can use the negation CSS pseudo-class :not().
item.left,
item.centre,
item.right{
width: 20px;
&:not(.left):not(.centre) {
width: 100px;
}
}
Fiddle: https://jsfiddle.net/e0nd7pk4
You can not do it. The only way is to override the first declaration.
item.left,
item.centre {
width: inherit;
}
How about & but without the space:
.MIXIN() {
width: 100px;
&.right { color: red; }
}
It compiles down to item.right.right which is a bit weird but won't match left and center.
Fiddle: http://jsfiddle.net/c0634wg2/
Lets start by giving an example,
Say for instance I have the class:
<html class="browser-ie"> ...
then on some element, I would like to call my mixin:
.browser-ie(#mixin){
html.browser-ie {
#mixin();
}
}
and be able to call it from for instance an element :
.main {
.nested {
.morenested {
.browser-ie({ min-height:100% });
}
}
}
and have it generate the following css:
html.browser-ie .main .nested .morenested { min-height:100%; }
Is there anything in the toolbox that would allow for such a thing?
I think that you are looking for the parent selector in your precompiler. This should output your desired CSS.
.main {
.nested {
.morenested {
html.browser-ie & {
min-height: 100%;
}
}
}
}
Keep in mind that the parent selector can fall anywhere in a declaration, and it will inherit all of the classes you have nested into up to that point, and append them to your string.
do you mean something like this?
.myColor{
min-height:100%;
}
.main{
.nested{
.morenested{
.myColor;
}
}
}
result:
/* Generated by less 2.4.0 */
.myColor {
min-height: 100%;
}
.main .nested .morenested {
min-height: 100%;
}
In my first line I have the following style:
* {
text-align:left;
}
Which works well through the site as most of it is left aligned. However a handful of areas need to be text-align: center and it will not update, even with !important. for example:
table.footer {
text-align:center !important;
}
Any ideas on how I can fix this?
It should work as you can see in this live example.
You might want to do this instead:
table.footer td
{
text-align:center;
}
!important is not needed anyway.
Live example
I guees I know what is missing.
The table.footer selector does only match for a table with class footer, not for the elements inside it
You could do
table.footer td {
text-align: center;
}
See http://jsfiddle.net/mMM5q/
or perhaps even better
html {
text-align: left;
}
* {
text-align: inherit;
}
See http://jsfiddle.net/B3F9U/
Can I do the following:
.content:not([class="no-touch"]) {
.content-index-container {
.chr-selector {
select {
margin-top: 5px;
}
}
}
}
when the no-touch class in not in the content class, but the other way around.
I know that my CSS won't work because it's wrong, but how can I achieve what I'm trying to do: style the content but ignore the styling if the content it's not within the touch class? (Modernizr appends the class to the HTML if touch devices are detected.)
You could reverse your thinking and modify the no-touch child instead....
select { margin-top: 5px; }
.content.no-touch .content-index-container .chr-selector select {
margin-top: 0;
}
or
select { margin-top: 5px; }
.content.no-touch select { margin-top: 0; }
No, I am afraid not. Javascript is your friend or add extra classes to your markup.