I have a span with [display:-webkit-box;] in an ant-design-vue-table item. When I try to use [opacity:0.3] in "tr", it's looks ok. But when I try to use [opacity:0.3] in the "-webkit-box 's father box", the opacity doesn't work. And when I don't use the [display:-webkit-box;] it's all ok.
I'm confused if I did something wrong?
here are the photos:
But when I try to use [opacity:0.3] in the "-webkit-box 's father box", the opacity doesn't work.
When I try to use [opacity:0.3] in "tr", it's looks ok
And when I don't use the [display:-webkit-box;] it's all ok.
You have a problem in the way the first selector is expressed.
[data-v-39bbd7fb] .row-gray .gray-item
A couple of points:
.row-gray is nowhere that I can see in that element. It should not be
part of the selector
remember that a space character has significance in a CSS selector. See for example MDN:
The descendant combinator — typically represented by a single space ( ) character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent's parent, parent's parent's parent, etc) element matching the first selector. Selectors that utilize a descendant combinator are called descendant selectors.
Therefore try this:
[data-v-39bbd7fb].gray-item - remember, no spaces as the attribute and the class are within the same element tag.
Related
I read corresponding part of http://www.w3.org/TR/CSS21/selector.html#class-html but can't find clear note that space between dot-class and tag change meaning. According to spec tag.clazz is equivalent to tag[class~="clazz"], and I expect that tag .clazz is equivalent to tag *.clazz. Is that true?
I expect that tag .class is equivalent to tag *.clazz. Is that true?
No. This is because class and clazz is not the same.
However, if you meant tag .clazz and tag *.clazz, then yes.
Explanation:
tag .clazz means any element with the class clazz somewhere
inside a tag tag.
tag *.clazz means any element of any tag name (*) with the class clazz somewhere inside a tag tag.
…which is effectively identical. The space essentially means “somewhere inside”.
5.2 - Selector syntax
A simple selector is either a type selector or universal
selector followed immediately by zero or more attribute
selectors, ID selectors, or pseudo-classes, in any
order. The simple selector matches if all of its components match.
Note: the terminology used here in CSS 2.1 is different from what
is used in CSS3.
A selector is a chain of one or more simple selectors separated by
combinators. Combinators are: white space, ">", and "+". White space
may appear between a combinator and the simple selectors around it.
So a space between a type selector and a class selector is a descendant combinator.
Because of a bug in webkit browsers, you can't use attribute and :before/:after classes by default.
The fix doesn't seem to have any effect when using nth-last-of-type selector.
Here's what I'm doing:
.left[class^='col']:nth-last-of-type{
margin-right: 0 !important;
}
Just wanted to check and see if I'm not overlooking something simple.
Your :nth-last-of-type syntax is a bit off — it's either :last-of-type or functional :nth-last-of-type() with a formula an+b as an argument.
The pseudo-classes pertaining to "type" refer to the element type, represented by its tag name. It does not mean "the last element matching the rest of this selector".
If, for example, the last element matching .left[class^='col'] is not the last span element, then :last-of-type will not match. You'll have to modify your HTML to either segregate those span elements from others, or add a class to the last such element, before you can target it with a selector.
WebKit does not have any issues with pseudo-classes and attribute selectors that I'm aware of (or if it did, those issues have long been fixed). It does have issues with pseudo-elements, which I address here, where the fiddle link originates.
Is it possible to have nested values inside the :not selector? For eg:
:not(div > div)
Whenever I tried it, it does not seem to work.
Perhaps you need to use it another way which I have not figured out?
So far, in all the examples I see, you can only use one value inside this selector.
:not() only accepts one simple selector at a time; this is mentioned in the Selectors 3 spec:
The negation pseudo-class, :not(X), is a functional notation taking a simple selector (excluding the negation pseudo-class itself) as an argument. It represents an element that is not represented by its argument.
The simple selectors in your example would be the two div tokens that you have. Other simple selectors include class selectors, ID selectors, attribute selectors and pseudo-classes. It does not accept more than one simple selector, nor does it accept combinators like > or space.
Depending on which elements you're trying to select exactly, there may not be a way to exclude div > div:
If you only want to select elements that are children of a div, that are themselves not div, use this instead:
div > :not(div)
If you only want to select div elements whose parent element is not a div, use this instead:
:not(div) > div
If you want to use this negation by itself, selecting all other elements, then there isn't a way using just a selector.
The only other viable workaround in CSS that I can think of is to apply styles to the elements you want without the :not() expression, then undo them for div > div. This works for any set of elements you're trying to target; the disadvantage is that not all properties can be easily reset.
Alternatively, if you're using jQuery, which does support :not(div > div) unlike the CSS version, you can place the selector in a script and, for instance, have jQuery apply a class name to those elements then target that class in your CSS.
It should work now thanks to Selectors Level 4 which allows :not() to take a list of complex selectors.
You can now also nest :not()... like :not(:not()) which wasn't allowed in Selectors Level 3. Not sure why you'd want to do that but you can.
I'm applying :last-of-type to an element that should be as such. Check out the final div.info (that's the bottom information for each article) on http://www.elemovements.com. Why is it not working?
The :nth-of-type() family of pseudo-classes only look at an element's type, that is, its tag name. They do not filter by your class selector or any other selector.
Therefore, your statements:
I'm applying :last-of-type to an element that is clearly as such. Check out the final div.info
Are contradictory. There's a div.center after that, making that the last div, not your div.info.
You cannot currently use CSS selectors to find your last div.info; you'll have to resort to adding an extra class and/or using JavaScript.
You're having one of the most common misconceptions about CSS. CSS is not read left-to-right, but right to left!
Meaning, the browser will look for div.info:last-of-type, so browser will filter elements in the following order:
Last element of each type (tag name)
Has class of info
Is a div.
Your element does not satisfy these conditions in that order. It may be the last div with class of info, but no last element has a class of info
This 2 are the same:
div.info:last-of-type
div:last-of-type.info
The :last-of-type is hitting the div, not the .info, and the .info is limiting the found results to 0.
Another example:
.section.section-test:last-of-type
Would actually works like: .section:last-of-type.section-test
While debugging some css i noticed there is a difference between this order of declaration. The first caused headings inside anchors to display inline as desired, the second seems not to:
1/ a.aname { display:inline; margin:0px;}
2/ .aname a { display:inline; margin:0px;}
<a name="download" class="aname"><h2>Download</h2></a>
I have mostly been using the second form to apply class styles.
What is the difference in how these are applied, and are there any guide rules when to use each? (to avoid the css-puzzlement which arises when it's done wrong)
Basic solution from answers:
Use "direct selection" elementtype.class{} or elementtype#id{} to apply style to elements directly. For styling which is intended to affect once each time the rule is used eg. a margin change, a display change, a noninheriting font change. Direct selection does not inherit to child elements, it is applied to parent element only.
Use "descendant selection" .class elementtype{} or #id elementtype to apply style to type descendants/children of the named or classed element. For styling which is intended to change appearance of elementtypes under an element/within a section of page where it is applied eg. inheriting font changes to text sections, inheriting format changes to paragraphs or list elements. Descendant selection applies to all child elements but never the parent.
NBself: learn about other selectors too asap ;)
The difference is the space between them, which is the descendant combinator in CSS.
The selector a.aname will match an anchor element with the class aname while the .aname a will match an anchor element that is a descendant of an element with the class aname:
<a class="aname">This matches the first rule</a>
<span class="aname"><a>This matches the second rule</a></span>
CSS combinators:
space = descendant combinator
> = child combinator (direct descendant)
+ = adjacent sibling combinator
The Selectutorial gives a pretty good overview or selectors and combinators.
If you use selectors where you can put identifiers together without combinators between them, the order doesn't matter. Example:
#id.class { ... }
.class#id { ... }