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.
Related
I have 1 parent and 3 childs, for example:
<div class="container">
<div class="header">Header</div>
<div class="small-box-1">Small box 1</div>
<div class="main-content">Main content</div>
</div>
I need to select all the child for background: red, without affecting the parent.
Normally I can just select the child class with something like:
.header, .small-box-1, .main-content{background: red}
In sass, I can use something like this:
& > * {background: red}
So it selects all the child under the parent.
I'm wondering if we can do that just using css? so I don't need to repeat the classes to define the background: red
SASS is just a CSS pre-processor so everything you write in SASS will eventually be compiled to CSS.
With that said, if you do this in SASS:
.container {
& > * {
background: red;
}
}
it will be converted to this CSS code:
.container > * {
background: red;
}
So you should be able to use that CSS code.
Thanks,
try somethings like this :
/* Select all direct child "div" of the parent ".container" */
.container > div
{
background-color: red;
}
should try something like this:
div.container > div {
background-color: red;
}
<div class="wrapper">
<!--
Several random elements that I'm not able to predict.
div, p, h3, etc.
-->
<div class="foo">...</div>
<!--
Could have only 1 .foo, 2 .foo, or 3, 4, 5 .foo...
-->
<div class="foo">...</div>
<!--
Also several random elements
-->
</div>
HTML code is something like above. Now I know the reason why div.foo:first-of-type doesn't work. But is there any alternative solution?
How can I select the first .foo? How can I select the last .foo? Of course via pure css...
Thanks!
How can I select the first .foo?
The technique described here: CSS selector for first element with class:
div.foo {
/* Style all */
}
div.foo ~ div.foo {
/* Revert styles for all but the first */
}
How can I select the last .foo?
The technique described above relies on sibling selectors and overrides. The biggest limitation of sibling selectors is that they only work in one direction, and since they work for the first element by overriding for all elements after the first, they won't work for the last because you can't select siblings that come before some other element using sibling selectors.
There is no pure CSS alternative.
Any HTML5 browser will let you use nth-of-type as it is intended...
I am not saying this is a recomended technique, I am just showing how this option works ...
I don't know if you will like it or not, but AFAIK is the only way to get what you want for the last one (as BoltClock says)
foo:first-of-type {
background-color: lightgreen;
}
foo:last-of-type {
background-color: lightblue;
}
<div>
<div>div</div>
<foo>foo</foo>
<div>div</div>
<foo>foo</foo>
<div>div</div>
<foo>foo</foo>
</div>
you can use first-child, and last-child
html
<div class="wrapper">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
css
p:first-child {
color: red;
}
p:last-child {
color: green;
}
Here's a JsFiddle Example
Beware that last-child is only supported since IE 9, and first-child is supported from IE 7
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>
JS Fiddle
Without altering the html is there any way to target the last .red class using CSS?
<div class="row">
<div class="red">Red</div>
<div class="red">Red</div>
<div class="red">Target Me With CSS???</div>
<div class="blue">Blue</div>
<div class="blue">Blue</div>
<div class="blue">Blue</div>
</div>
here's what I've tried :
.row > div{
display:inline-block;
padding:10px;
}
.row .red{
background-color:#770000;
color:#fff;
}
.row .red:first-child{
background-color:#440000;
color:#fff;
}
/*have tried :last-of-type too*/
.row .red:last-child{
background-color:#FF0000;
}
.row div:last-child{
background-color:#0000BB;
}
I don't believe there is a way to do that without using JS.
The closest you can get is to target the 3rd item with:
.row div:nth-child(3) {
background: chucknorris;
}
You can include a qualifier to only target the third child if it is .red like so:
.red:nth-child(3) {
background: chucknorris;
}
http://jsfiddle.net/s76J3/3/
Unfortunately, you can't do this with CSS alone. Here are a few other SO questions that are related to yours:
Using :last-child with class selector
CSS last-child selector: select last-element of specific class, not last child inside of parent?
However, if your last .red sometimes is in different positions, and you can't change the HTML at all, then you will have to rely on some light JS/jQuery.
$(function() {
$('.row .red').last().addClass('last-red-class');
});
You can use it to add another class to the last .red, and just reference that in your CSS.
http://jsfiddle.net/s76J3/2/
HTH
:last-of-type description
The :last-of-type CSS pseudo-class represents the last sibling of its type in the list of children of its parent element.
and syntax
element:last-of-type { style properties }
So, what really going in your example is that the browser selected the right div element but it was not the last div element of its parent; therefore, nothing was applied. To test this, change all your .red class div into a span and do the following
.row span:last-of-type{
background-color:#FF0000;
}
then you will get a working code.
http://jsfiddle.net/s76J3/4/
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type
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.