I know that a * prefix before a style name like *border-top-width:0; is a hack for IE browsers. However, I am unable to understand this. When * is used as suffix as shown below what does it mean ??
.ancestors *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
I observed that when star mark is present, the style is getting applied in chrome browser and when star mark is removed , the styles are not getting applied in chrome browser.
The * (Asterisk) symbol in a CSS file, when used after a class name, or any other identifier, will select all descendants/children inside that element.
For example, if we have this HTML document:
<div class="container">
<div class="square">
<div class="square">
</div>
<div class="container">
<div class="circle">
<div class="circle">
</div>
To select just the .container divs, the following CSS can be used:
.container
{
/*Styling*/
}
To select just the .square inside the .containers then use:
.container .square
{
/*Styling for squares*/
}
To select all the elements that are inside the .containers then use:
.container *
{
/*Styling for squares, circles, rectangles and everything else you can think off*/
}
For further information, see the W3C reference on the Universal Selector:
http://www.w3.org/TR/selectors/#universal-selector
And also the Mozilla Dev Network:
https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors
When star(*) is placed after the a class name it will select all its children.
From MDN:
An Asterisk (*) is the universal selector for CSS. It matches a single
element of any type. Omitting the asterisk with simple selectors has
the same effect. For instance, *.warning and .warning are considered
equal.
Like in many other places, the asterisk is a wildcard that selects every element. When used after a class name (like in your example), every element that is a descendent of the ancestor class will have the styles applied.
Related
Let's say I have an html element with a class of box:
<p class="box alert">Content here</p>
Recently I learned about a way of targeting elements in CSS, so if I want to select any element with a class of box I could use this:
*[class~=box] {border: 2px solid grey;}
And I'm wondering, isn't it literally the same as just targeting an element by a class name? Or I didn't get it correctly?
.box {border: 2px solid grey;}
If it is the same, in which situations it is appropriate to use the second method rather than the first one?
An attribute selector is not really designed for classes, it is designed for other attributes in elements for example a[href*="google"], but yes you can style elements like this and that would be definitely considered an anti-pattern.
Although .classname and [class~="classname"] would style the same elements the CSS specificity of those selectors would be calculated differently - to be honest, I'm not exactly sure but *[class~="classname"] could win with .classname and it's something a person working with styles which had been written like that should be aware of.
For the sake of selecting, the selectors are indeed equivalent. The differences between them are both practical and historical.
Practical difference
From a practical point of view, the class selector is far more readable and straightforward. It is also far more efficient, since browsers treat classes differently than other attributes, for CSS and DOM queries. The attribute selector in general makes more sense for any other attribute that is not a class, when you wish to select by a single value out of "a whitespace-separated list of words, one of which is exactly value" (MDN spec).
For example, if you have a data attribute with several possible values to choose from like so:
<div data-colors="blue">
<div data-colors="yellow blue">
<div data-colors="red blue green">
The attribute selector [data-colors~=blue] would select all three elements, regardless of any other values in the attribute.
Historical difference
Historically, the class selector .box is part of the original CSS specification (.i.e "CSS 1"). This means this selector is supported by any browser past and present. On the other hand, the attribute selector [class~=box] is only part of the second iteration of the CSS specification (i.e. "CSS2") and is therefore not supported by every possible browser; though you would have to go back as far as Internet Explorer 6 to run into issues with this selector.
One important difference is the use of some special names with your classes.
Here is an example to illustrate:
.box {
height:50px;
background:red;
margin:5px;
}
.80% {
width:80%;
}
.50% {
width:50%;
}
<div class="box 80%"></div>
<div class="box 50%"></div>
In the above nothing will happen because we need to escape the number and % inside the selector but with the attribute selector it's easy:
.box {
height:50px;
background:red;
margin:5px;
}
[class~="80%"] {
width:80%;
}
[class~="50%"] {
width:50%;
}
<div class="box 80%"></div>
<div class="box 50%"></div>
For the first you need to write the following which is no trivial:
.box {
height:50px;
background:red;
margin:5px;
}
.\38 0\% {
width:80%;
}
.\35 0\% {
width:50%;
}
<div class="box 80%"></div>
<div class="box 50%"></div>
Both would have exactly the same result so *[class~="classname"] is equivalent to .classname, just that the selection is made using the class attribute. See attribute selector to get more info on this syntax.
.classname {
color: blue;
}
*[class~="classname"] {
color: red;
}
<p class="classname">Content here</p>
*[class~="classname"] {
color: red;
}
.classname {
color: blue;
}
<p class="classname">Content here</p>
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 created fiddle to show the example: I think I am setting parent CSS and then I apply the child's CSS. But it seems like it is being ignored.
http://jsfiddle.net/8PWNw/2/
<div id="displaybox" class ="displaybox" style="display: none;">
<div class = "parent" >
Parent 1
</div>
<span class ="child" style="padding: 0 10 ">Child 1</span>
<div class = "parent" >
Parent 2
</div>
<span class ="child" style="padding: 0 10 ">Child 1</span>
</div>
Please advise. I am new to CSS, so there are many things that I need learn.
Line 23 in your CSS:
/* this is actually saying element with both 'parent' and 'a' class */
.displaybox .parent.a {
color: black;
}
You probably meant:
/* this is actually saying all 'A' elements within element with 'parent' class */
.displaybox .parent a {
color: black;
}
That is why your 'A' element style is being ignored.
padding: 0 10 isn't valid (use a validator) so browsers are required to ignore it.
Lengths, other than zero, must have units (such as px or em).
You shouldn't be able to tell this though, since display: none hides everything.
Your class displaybox is set on display: none, which basically hides the entire container.
On another note, you use classes parent-child, but your children aren't nested properly into their parents. You need to put them before the end </div> tags so they be a part of that container.
I edited your fiddle and this should work now: http://jsfiddle.net/8PWNw/
This is what I changed:
I removed the display:none so your displaybox is shown again. I then changed some CSS:
Changed this, because your syntax didn't work before. The "." indicates you're addressing a class, in this case class displaybox with a child class parent, and you want to address all a elements in that class.
.displaybox .parent a
{
color: black;
}
I also added this one so you're links are showing as white:
.child a
{
color: white;
}
With those changes, you should be able to get it working like you want.
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