I saw the following snippet in a css file. What does it do?
h3 ~ *:not(h3) {
margin-left: 15px;
}
Obviously it alters h3 headers in some way but I don't understand what ~ *:not(h3) does.
Googling ~ *:not(h3) is unproductive.
The isn't HTML. It is a CSS selector.
Specifically, it is the negation pseudo-class:
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.
Obviously it alters h3 headers
No, it does exactly the opposite. It stops the selector from matching h3 elements.
This is CSS, not HTML. See Mozilla's documentation on the CSS negation pseudo class for more details, but not basically selects elements that do not match the specified selector (in this case, h3).
Related
I was wondering if there is a shorthand for CSS pseudo selectors, since I have 4 repeated [:not] selectors.
div > h3 ~ div:nth-child(5):not(.no-need-2 > div):not(.no-need > div):not(p
~ div):not(.no-need)
The title asks a very general question which I am not sure how to interpret so this answer sticks to the specific situation with the :not pseudo class.
See MDN
The :not() pseudo-class requires a comma-separated list of one or more selectors as its argument. The list must not contain another negation selector or a pseudo-element.
For the selector given in the question therefore you could use
div > h3 ~ div:nth-child(5):not(.no-need-2 > div, .no-need > div, p ~ div, .no-need)
Most common browsers now support this list format but check https://caniuse.com/?search=not
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.
I am trying the :not pseudoclass selector, I want everything on the page to have color blue except the childs of a div which class="pag", so I wrote:
:not(.pag > p){
color:blue;
}
<div class="pag">
<p>First</p>
<p>Second</p>
<p>Thirt</p>
<article>Blah blah blah</article>
</div>
but it doesnt seem to work. Can somebody explain me why?
http://jsfiddle.net/Rc9pT/
It works fine if you simplify the selector:
.pag > :not(p){
color:blue;
}
JS Fiddle demo.
Albeit this 'works fine' only with the caveat that you have to specify a selector, with this approach, for every parent-child relationship; which may become burdensome.
I suspect that it's the simplicity that's required:
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.
A 'simple selector' is defined as:
either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.
This seems to imply that any selector incorporating combinators (such as white-space, >, + or ~, among others) is not 'simple', unfortunately.
References:
Negation (:not()) pseudo-class.
Simple selector definition.
I was wondering if its possible to "embed" pseudo-classes inside of each other. I have a hunch that you can't, but I just want to make sure I don't just have syntax wrong.
Here's an example of what I'm trying to do:
p.description { margin-bottom: 20px; }
Given that style, if you only want that to happen on matches that aren't the LAST p.description, is there anyway to do the following?
p.description:not(p.description:last-child)
Naturally, I'd have two styles, like so:
p.description { margin-bottom: 20px; }
p.description:last-child { margin-bottom: 0; }
...but that seems wasteful if it can be done in a single line.
Thanks a lot!
Yes, to the title of your question:
p.description:not(:last-child)
No, to the CSS example in the body of your question
p.description:not(p.description:last-child)
The spec says:
The negation pseudo-class, :not(X), is a functional notation taking a simple selector (excluding the negation pseudo-class itself) as an argument.
A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.
Yes, p.description:not(:last-child).
Yes you can, in webkit it works fine. I use this for example:
.middlenav:not(:nth-last-child(1))
Works great.
so p.description:not(:last-child).
should too
In the below example, I want to create a CSS rule that applies only to the header with the text "Blockhead".
<div class="gumby">
<span class="pokey"></span>
<h3>Blockhead</h3>
<h3>Clay rules</h3>
</div>
Can I use parentheses, such as (.gumby > .pokey) + h3? If not, what is my alternative?
No, parentheses are not valid operators in CSS selectors. They are reserved for functional notations, such as :lang(), :not(), and :nth-child().
You don't need them anyway; .gumby > .pokey + h3 by itself will work just fine.
This is because a sequence of selectors and combinators is always read linearly. Combinators don't have any sort of precedence. The selector can be interpreted as
Select an h3 element
that immediately follows an element with class pokey
that is a child of an element with class gumby.
And because of how node trees work, the use of sibling and child combinators here implies that both .pokey and the h3 are children of .gumby, which in your case they are, because of its statement that both of them are siblings.
As of 2022, we can now use the :is() selector for this purpose:
https://developer.mozilla.org/en-US/docs/Web/CSS/:is
:is(.gumby > .pokey) + h3 {
color: blue;
}
<div class="gumby">
<span class="pokey"></span>
<h3>Blockhead</h3>
<h3>Clay rules</h3>
</div>
If I understand correctly, :is() can simulate both logical AND :is(A):is(B):is(C) and logical OR :is(A, B, C), allowing for powerful combinations. Don't forget to use it in concert with other structural pseudo-classes such as :not() and :nth-child(), CSS Combinators, and DOM Traversal methods such as document.querySelectorAll().
Also, the :where() pseudo-class is identical except that it has 0 specificity, while :is() takes the specificity of its most specific argument.
h3 is not inside .pokey so you must ommit .pokey from the rule
All u'd be able to do is
.gumby h3 {}
or do this
<div class="gumby pokey">
<h3>Blockhead</h3>
<h3>Clay rules</h3>
</div>
.gumby.pokey h3 {}
if a tag has more than one class you can pile them up in css if you don't use a space character