This question already has answers here:
What does an asterisk (*) do in a CSS selector?
(5 answers)
Closed 9 years ago.
Ok, looking at some code in a CSS Stylesheet assigned to a project, I noticed this:
* {
margin: 0px;
padding: 0px;
text-decoration: none;
}
What does this bit do?? What elements does it effect exactly?? Strange, never heard tell of using the asterisks as a selector or whatever it is supposed to be for. What does the asterisk do exactly?
* affects (I should say "represents the qualified name of") all elements. Per spec:
http://www.w3.org/TR/selectors/#universal-selector
The asterisk is the 'universal selector' and applies the style to all elements on the page. This code will reset everything to have no margins, padding or text-decoration.
Universal selector on W3.org
It is the universal selector, much like the '$' in jQuery. It is usually used in the reset
Related
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 2 years ago.
I found there is no official parent selector, but there are pseudo-classes like :has, so I was wondering how one would go about applying CSS to the following kind of paragraph:
<p><em>[11] Source Text</em></p>
I'd need to apply CSS to this type of paragraph, which is one in a list of several, and the only thing they have in common (besides the structure) is the '_ftn' part of the name attribute. Unfortunately, these paragraphs are also not wrapped in another element I could build the CSS on - that's how it comes out of a plugin...
Thanks for any inputs from you CSS gurus!
The :has() CSS selector is currently not supported by any browser (reference).
However, if you want to target anchor elements which are placed within a p > em tag, you can do something like this:
Note the attribute selector [name^="_ftn"] on the a element.
p em a[name^="_ftn"] {
color: green;
font-size: 18px;
text-decoration: none;
font-weight: 700;
}
<p><em>[11] Source Text</em></p>
This question already has answers here:
Purpose of asterisk before a CSS property
(6 answers)
Closed 9 years ago.
I've been using Twitter's Bootstrap package to build a site, and was browsing through the CSS when I came across the following (more or less, cruft redacted for clarity):
.btn-primary {
background-color: #006dcc;
*background-color: #0044cc;
}
Now, I've seen * used as part of the selector, both as part of a constructor like li li * { ... } and as part of an attribute selector a [name*=foo] (and obviously as part of CSS comments /* */), but I've never seen this before. Can anybody share any insight as to what it's being used for? I've also seen it in the following (complete) context:
button.btn,
input[type="submit"].btn {
*padding-top: 3px;
*padding-bottom: 3px;
}
where the * is in front of two related but distinct properties. What's going on?
This article should answer your question. It's basically a way 'hacking' CSS selectors to target a certain browser.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
What is the performance impact of CSS’s universal selector?
Ive read that using the * CSS selector isnt ideal as it takes longer to process. However how much is this really an issue? How much longer will it take a page to be displayed if I have the following in my CSS?
#div1 *,
#div2 * {
float: none !important;
width: auto !important;
height: auto !important;
text-align: left;
position: static !important;
}
It seems to me that the connection speed and number of large assets like images is going to make far more of a difference. The work im doing is for mobile optimization but the page size (due to various libraries) is around 750KB and there is nothing I can do about this.
As a side note im aware that using !important isnt ideal too but the messy code ive inherited means its required in this case.
Read this article.
The key to optimizing CSS selectors is to focus on the rightmost
selector, also called the key selector (coincidence?). Here’s a much
more expensive selector: A.class0007 * {}. Although this selector
might look simpler, it’s more expensive for the browser to match.
Because the browser moves right to left, it starts by checking all the
elements that match the key selector, “*“. This means the browser must
try to match this selector against all elements in the page.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
css: the meaning of * mark
What does the symbol * mean in CSS3. As used in a code;
*{
margin: 0;
padding:0;
}
this refers to all the elements and this particular code will make all the element's margin and padding as 0
It's basically a reset style. To cancel out differences in user agent/browser styles.
* is a general and CSS wildcard, the selector you show above selects all elements in a HTML document. It is commonly used in reset stylesheets and is sometimes referred to as a universal selector.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
What does an asterisk do in a CSS property name?
I'm going through css style sheet provided with twitter bootstrap 2.0 and I see a lot of properties for which a * is appended before them. Ex: *margin-top , *zoom, *display etc..
What does this * imply ? Ex: listing of one of the rules -
audio, canvas, video {
display: inline-block;
*display: inline;
*zoom: 1;
}
direct link for bootstrap.css file
This is called a CSS hack. Its intent is to target specific versions of IE:
The *<property> is used to target IE7 (and below).
This aticle for NetTuts explains it well