I just wanted to know when is neccessary for me to place a div.cssclass when using two css classes together in my stylesheet. I normally troubleshoot by using with and without it until it works which obviously is fine and quick enough but I would be good to know the best practice.
Example:
.cssclass1 .cssclass2 { }
VS
.cssclass1 div.cssclass2 { }
Is it when its not a direct sibling to it, i.e the next class nested in there?
If both those elements are divs, then there is no difference, except that
.cssclass1 .cssclass2 {
is faster than
.cssclass1 div.cssclass2 {
If you'd have let's say:
<div class="cssclass1">
<div class="cssclass2"></div>
<a class="cssclass2"></a>
</div>
then .cssclass1 .cssclass2 { would select both div and a, while .cssclass1 div.cssclass2 { would select only the div.
The difference is Specificity because if you have .cssclass1 .cssclass2, all elements with that classes are affected BUT if you use .cssclass1 div.cssclass2, the only affected is the <div> element with the cssclass2 class.
As Jonjie said, it's about specificity. Here's an example...
div .cssclass2 {
background-color: green;
}
.cssclass1 div {
background-color: blue;
}
div div {
background-color: orange;
}
<div class="cssclass1">
<div class="cssclass2">
hello
</div>
</div>
As you can see, none of the styling declarations are an exact match for our html here. So, what colour should the background be? CSS has a way to resolve this ambiguity by identifying the css that is most specific to the html. There are some good blog posts about understanding CSS specificity.
Related
I need change a color for this element
<div class="box download">
<div class="box-inner-block">
Plugin Windows
</div>
</div>
I call a from CSS with:
.download.box-inner-block a {
color: white!important;
}
But it does not work, why? I need this color only for the element in .box-inner-block inside .download.
Is this what you are looking for as understood in your question ?
If so you need to carefully watch how you indent and construct your css.
As you can see in my snippet I added a space between:
.download .box-inner-block a
in order to make that work.
You can also remove !important from you css as it will not be useful in that case. If you need it, don't forget to add a space bewtween white and !important
.download {
background-color: black;
}
.download .box-inner-block a {
color: white;
}
<div class="box download">
<div class="box-inner-block">
Plugin Windows
</div>
</div>
You are using the wrong selector, as .download.box-inner-block selects elements which has both download AND box-inner-block classes.
<div class="download box-inner-block"/>
To target nested elements, leave a space between the two class selectors. So the correct selector in your case is:
.download .box-inner-block a {
color: white;
}
In this case you can drop !important too.
<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
I would like to know how I can apply the CSS of one class in another. I did little bit of research on this and I found two solutions.
Using LESS
Specify both the classes like class="content colorTxt"
Unfortunately I cannot use both these options. Because I have permission to edit only the CSS files. So it would be great if you can let me know if there is any other option. Something like below:
.colorTxt{
color: Blue;
}
.content, .colorTxt
{
}
I tried this option, but it doesn't work. Please let me know what can be done.
What you're trying to achive is not possible with pure CSS.
There is one case when .content is the descendant of .colorTxt, but even then all that you can is inherit some know properties of .colorTxt, nothing more.
<div class="colorTxt">
<div class="content"></div>
</div>
.colorTxt { color: blue; }
.content { color: inherit; }
How can I set the style of only the first div that has class "bla"? (not the second).
<div class="outer">
<div>
....(more div's, unknown how many)
<div class="bla">
....
<div class="bla">some content</div>
</div>
....
</div>
</div>
I'm assuming with this answer that by adjacent elements you mean sibling elements. If you were referring to parent-child elements then go with N1xx1's answer. That being said...
You can't target the first bla with css selectors alone. But you can target all the blas but the first. So, one possibility is to set the styles you want only on the first bla on all blas. Then override those styles by targeting all blas but the first. Like so:
.bla {
...styles for the first bla..
}
.bla ~ .bla {
...override styles set on first bla that you dont want on the others
}
The tilde between the two ".bla"'s is called the general sibling selector. If you've never heard of it, head on over to css selectors spec.
You can do simple workaround for this since you can't do that with any special selector:
.bla {
/* style here, example: */
background-color: #f00;
}
.bla .bla {
/* negate the style, example: */
background-color: transparent;
}
I hope this is what you were looking for.
According to pure css, you can't select according to the ordering of the html elements. Search the spec (here: http://www.w3.org/TR/CSS2/selector.html). There is nothing that refers to how many or in what order html elements match the given selectors.
Javascript:
getElementsByClass('bla')[0].style
EDIT: JOPLOmacedo provided a CSS only (better) answer
I've also found a way to select for instance the second <p> after a <h1> tag:
h1 + p + p{
background: red;
}
Just thought I'd share that.
You may have multiple classes on an element separated by a space:
<div class="header contaminated">...</div>
and you can target that div using .header.contaminated selector.
That's fine when both classes are directly applied to an element. i want to target an element with CSS that has both styles, but one style comes from the parent:
Example
<div class="contaminated">
<div class="header">...</div>
</div>
Normally i want to style a header as blue:
.header { background-color: #99FFFF; }
But if a div is contaminated then i color the entire background red:
.contaminated { background-color: Pink; }
.contaminated.header { background-color: HotPink; }
Except i don't think the css selector syntax .contaminated.header is valid for "inherited" styles.
Note: The reason i don't think it's valid is because it doesn't work
Is it possible to target an element with CSS if it only contains two classes, and some of the classes are "inherited" ?
jsFiddle sandbox
This is basic CSS - separate the class names by a space, that implies/applies the cascade:
.contaminated .header { ... }
Anything wrong with that?
Cheers
I'm confused as to your question, wouldn't this do it?
.contaminated .header { background-color: HotPink; }
Notice the space, saying "look for an element with a class of .header within an element with a class of .contaminated"
.contaminated>.header{}
will only target element header that are direct children of .contaminated