Is it possible to apply the class with CSS to subelement as in the following example, without adding <el class="classname"> to each element?
HTML
<div id="container">
<p>TEXT</p>
<div>text</div>
<p>TEXT</p>
<div>text</div>
</div>
CSS
#container {
background-color:#000;
color:#FFF;
}
#container > p {
color:#F0F0F0;
/* APPLY ALSO CLASS TITLE TO ALL #container > p */
}
#container > div {
font-size:125%;
/* APPLY ALSO CLASS WRITE TO ALL #container > div */
}
.titles {
font-family:....;
font-style:....;
/* and so on */
}
.write {
/* some stuff */
}
No. There is no way in CSS to say that you want #container > p to also include all the styles you've written for .titles.
However, take a look at Sass. Writing Sass is a lot like writing CSS, but it lets you do exactly what you've described here. You could write:
.titles {
...
}
#container > p {
#extend .titles;
...
}
This is not something the browser knows how to do, but the browser never sees it. Sass turns your special code into real CSS, and you use that on your site.
Using pure CSS, you'd have to do something like:
.titles, #container > p, #container >div {
...
}
No, you can't apply classes to elements from within CSS. What you would do is copy the code from the .tiles & .write classes and apply it to the the elements you want styled that way.
Something that can make this relationship easier to manage is a CSS pre-processor like Less or Sass
This would work but it's not very elegant. Unfortunately all the styles would be used on the parent element which would cause problems most of the time. What you need is SASS or LESS like already mentioned so you can create reusable functions that allow flexibilty.
.titles,
.titles > p {
font-family:....;
font-style:....;
/* and so on */
}
.write,
.write > div {
/* some stuff */
}
div id="container" class="titles write">
<p>TEXT</p>
<div>text</div>
<p>TEXT</p>
<div>text</div>
</div>
Related
HTML:
<div class="home">
<div class="a">
A content
</div>
<div class="b">
B content
</div>
<div class="c">
C content
</div>
<div class="d">
D content
</div>
<div class="e">
E content
</div>
</div>
To apply common styles for a,c and e children under home class we can use multiple css selectors as written below.
CSS:
.home .a,.home .c,.home .e{
background-color:#ccc;
}
Question:
What is the shorter version of the above css?
Now as a c and e are common children of home. Instead of repeating .home again and again how can I write a shorter syntax to select class a, b and c that are under home class.
Maybe something like:
.home(.a,.c,.e){
color:#ccc;
}
I know it is wrong but just gives a clear idea about my question here, what I am looking for.
The code .home(.a,.c,.e) won't work, and there is no OR operator for CSS selectors. home .a,.home .c,.home .e is the shortest way.
But here a few selectors that might help you:
.home div { } /* all divs in home */
.home > div { } /* all divs that are a direct child of .home */
.home * { } /* all elements in .home */
.home > * { } /* all direct children of .home */
There also exist CSS preprocessors, like SASS and LESS that give you more possibilities.
Use the child selector '>'.
CSS:
.home > div {
color: #ccc;
}
div with class a, c and e can be selected using :nth-child pseudoclass
.home > div:nth-child(2n + 1) {
background-color:#ccc;
}
with the given markup this is equivalent to
.home .a, .home .c, .home .e{
background-color:#ccc;
}
Codepen Example: http://codepen.io/anon/pen/XbPNPw
If you want to mention names of classes explicitly (e.g. a, b, c) but don't want repetition in your source css, maybe it's nice idea to start using some CSS-preprocessor, like Sass or less. For example, with Sass you can write in .scss file this:
.home {
.a, .c, .e {
background-color:#ccc;
}
}
On the output Sass will compile it to .css file:
.home .a, .home .c, .home .e{
background-color:#ccc;
}
This will keep your source files clean.
In current CSS, there is no such syntax.
CSS Selectors 4 has :matches pseudo-class, that will be able to do such grouping:
.home:matches(.a,.c,.e){
color:#ccc;
}
Unfortunately, it isn't supported by browsers yet. Gecko- and WebKit/Blink-based browsers have experimental implementation of an old draft as :-moz-any() and -webkit-any(), respectively, but you will have to write the selectors twice to get it working in these browsers only, so they are far from practical use now.
But you can simplify your CSS like this with CSS preprocessors.
Let's say I have the following markup.
<div class="parent1">
<div class="inner1"></div>
<div class="inner2"></div>
</div>
<div class="parent2">
<div class="inner1"></div>
<div class="inner2"></div>
</div>
If I only want to style inner1 of parent1 then I can do something as follows.
.parent1 .inner1{}
However if I want to specify different styles for each of the inner containers then I have to write .parentx in each statement. So my question is can I nest my css statements? The logic would resemble the following:
.parent1{
.inner1{}
.inner2{}
}
.parent2{
.inner1{}
.inner2{}
}
CSS itself does not allow nesting. However, clever guys these days came up with a concept of pre-compiled CSS, such as SASS, LESS etc.
http://lesscss.org/
For example, in LESS something like this is allowed:
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
But if you are stuck with raw CSS, then what #Brian suggested in his answer would be the best option:
.parent1 .inner1,
.parent1 .inner2 {
/*styles*/
}
.parent2 .inner1,
.parent2 .inner2 {
/*styles*/
}
What you want is:
.parent1 .inner1,
.parent1 .inner2 {
/*styles*/
}
.parent2 .inner1,
.parent2 .inner2 {
/*styles*/
}
This will apply the styles to the 2 lots accordingly.
CSS doesn't give us much in the way of reducing keystrokes. This is why projects like Less and Sass were created.
The shorthand you've described there would be nice, but sadly is not a feature of CSS. The selectors are always read right to left, so .parent1 .inner1 instructs the browser to "find all items with an inner1 class, then loops through those to find the one(s) that are also a parent1 class.
In your specific example, you might consider one of the following options:
If your styles are specific to a single item (the first div within parent1), consider giving that item an id="foo" and then refer to it as #foo in your CSS.
If you don't want to do that, use the > (child) operator to define rules like this...
.inner1 > .parent1
This applies rules for the .inner1 divs that are directly descended from a .parent1 block.
Hope that helps.
I want to be able to access classes further up the dom tree from within a nested class using LESS CSS, see example:
HTML:
<html class="svg">
<body>
<div class="content">
<div class="container">
<div class="logo"></div>
</div>
</body>
</html>
LESS:
.container {
.logo {
background:url(/images/ws-logo.gif);
}
}
I want to target the .svg class on the html tag from within the .logo nested rule, to keep things tidy instead of writing another rule like this:
.svg {
.container {
.logo {
background:url(/images/logo.svg);
}
}
}
So, ideally something like this:
.container {
.logo {
background:url(/images/logo.gif);
(some-symbol).svg {
background:url(/images/svg-logo.svg);
}
}
}
I'm using modernizr to detect svg support.
Anyone know if this is possible? Or have any recommendations?
Yes! (an update)
When I tested this here, it worked!
.container {
.logo {
background:url(/images/logo.gif);
.svg & {
background:url(/images/svg-logo.svg);
}
}
}
This is not possible because you can't "step back" in the path to add another class to a parent. Instead, just write another rule:
.svg .container .logo,
/* or perhaps even simpler, however be aware of rule specificity*/
.svg .logo{
background:url(/images/logo.svg);
}
It's not much of a deal, is it?
For the sake of completeness: You can reference to the actual element via the &-symbol. THis makes sense if you want to target pseudo-classes/elements or additional classes of the current element:
.container {
.logo {
/* styles for ".container .logo" */
}
&:hover .logo{
/* styles for ".container .logo"
The hover however is bound to the .container element
equals the following selector: .container:hover .logo */
}
}
I hope this isn't a duplicate, but I'm not sure even how to phrase what I'm trying to do. I have some utility CSS rules for like clearing floats and creating horizontal boxes. What I want to do is something like this:
.clear{
clear:both;
}
#someID > div{
/*apply the .clear class here*/
}
I know I can do this with JavaScript, but I would like to avoid having class="clear" a million times if I can avoid it. I would also like to avoid duplicating the style information in the second selector so I don't have to maintain multiple utility classes.
The .clear class is just an example, my actual classes are more involved.
Really, you're just going to have to use your utility classes like clear throughout your markup, unless you want to do something like this (which is probably not what you want):
.clear, #someID > div
{
clear:both;
/* this assumes you have no other rules here, which probably isn't true */
}
In short, there's not much better you can do, unless you want to use a preprocessor for your CSS, like LESS.
You can't do it in pure CSS. You can do it easily with LESS or jQuery, just use:
$('#someID > div').addClass('clear');.
In HTML/CSS, you can have multiple clases like this:
HTML
<!--If you are using a id and a class:-->
<div id="someID" class="clear"></div>
<!--If you are using 2 classes-->
<div class="someClass clear"></div>
CSS
.clear{
clear:both;
}
#someID {
/* specific style here */
}
.someClass {
/* specific style here */
}
I have more than twenty divs.
The divs have id's of #div_1,#div_2,#div_3...
Each div has a button and an image. and they are named the same in each div: #button_1, #image_1.
Is it possible to construct my css like this:
#div1 {
#button_1{ };
#image_1{};
}
#div2 {
#button_1{};
#image_1{};
}
First things first, you should never use the same ID more than once in a single page. The whole point of an ID is that it is unique.
Therefore, having a button called id='button_1' inside each of your divs is wrong.
If you want to use the same reference multiple times, use a class instead of ID. So your buttons, for example, should be class='button_1' instead.
Secondly, the CSS syntax you're asking for is not correct. You can't nest CSS in this way. However, what you're asking for can be achieved quite easily; simply chain the selectors together like so:
#div1 .button_1 { ... }
#div1 .image_1 { ... }
#div2 .button_1 { ... }
#div2 .image_1 { ... }
etc.
However, if the images and buttons are similar between, you don't need to specify the styles twice, just create a CSS block for the two classes that contain the shared styles:
.button_1 { ... }
.image_1 { ... }
Any styles that are different between them you can still declare in the same way as discussed before, so your whole CSS could look like this:
/* shared styles for all the buttons */
.button_1 { ... }
/* shared styles for all the images */
.image_1 { ... }
/* extra styles only applying to the ones in div1 */
#div1 .button_1 { ... }
#div1 .image_1 { ... }
/* extra styles only applying to the ones in div2 */
#div2 .button_1 { ... }
#div2 .image_1 { ... }
...etc.
Hope that helps.
IDs are unique, you should not repeat them in a page. You can't have multiple #button_1's and #image_1's
What you really should be doing is:
HTML
<div id="div-1" class="foo">
<button id="button-1">Hello</button>
<img src="blah.gif" id="img-1" />
</div>
<div id="div-2" class="foo">
<button id="button-2">Hello</button>
<img src="blah.gif" id="img-2" />
</div>
<div id="div-3" class="foo">
<button id="button-3">Hello</button>
<img src="blah.gif" id="img-3" />
</div>
CSS
.foo { ... }
.foo button { ... }
.foo img { ... }
Note that to style the buttons and images inside the divs you don't actually need to give them IDs
No, you can't write your CSS like that. In any case, if you find yourself styling 20 individual DIVs in a series then you're doing something wrong. It would be simpler for you to write styles for the classes rather than writing them for IDs
What you can do is write something like :
#div2 #button_1{
}
#div2 #image_1{
}
if you are trying to make the CSS rules only available to the objects inside a certain div (in the example above they only apply to divs inside div2.
Take a look at http://sass-lang.com/ you want to use a mixin