Css selectors all exception

CSS selectors exceptions in LESS framework?

there’s not really a great way to do this with less, since it would need to provide you with a non-native selector. You might want to use a JS library to add a class to those items, like with api.jquery.com/has-selector

1 Answer 1

The Answer is «No»

LESS, being a CSS preprocessor has two main things that prevent what you are wanting to do.

1. As a preprocessor run server-side, it has no idea about the actual HTML structure of a page (unlike javascript being ran client-side). Even if you are running LESS client-side in actual release (not normally recommended), it takes extra javascript work to get it to actually have any awareness of the HTML structure. So LESS cannot respond on the fly to the HTML like javascript itself can.
2. As a CSS preprocessor, it will ultimately produce from its code only what you might write in native CSS. Since there is currently no «parent selector» in CSS (which is what you are really asking. how to select a parent li or not based off its child a element), then LESS cannot produce something CSS cannot itself do.

So if you have control of the HTML, I recommend putting a class on either the li elements that have an a or those that do not. If it is dynamic (and thus unknown until run time), then javascript itself (whether through a library like JQuery or otherwise), will be the only possible solution left to you.

Источник

How to select all elements excluding a specific one along with all its descendants

UPDATE: This may not be possible. I’m still looking for a solution. I need to create a CSS selector to select all the page elements using * which would exclude .exception elements along with ALL its descendants (!). This .exception element and its descendants needs to detain its initial styles while * styles should be applied to all the other page elements. IMPORTANT: The solution is not good if any styles will be applied to .exception and its descendants first and then I need to override it to its initial values manually! I don’t want to apply ANY STYLES to .exception and/or its descendants AT ALL!

Desired result

Please keep in mind that this is only a trivial example. The page where I need to apply the solution contains much more elements so I need a generic solution for filtering the elements. Manual selection and overriding elements wouldn’t be possible there. http://jsfiddle.net/zV5gf/2/ (initial state, no solution)

Solution with :not selector — not perfect

This solution is not good enough because it WILL EXCLUDE li.exception but it WILL NOT EXCLUDE its descendants. li.exception descendants initial styles will be lost. http://jsfiddle.net/zV5gf/3/

and the logical solution for div.exception and its descendants doesn’t work (not supported by browsers):

Источник

Select all except first and last td element in one selector

I’m trying to apply this to table cells, which are not first and not last in the row with .red class. It seems to work as expected, but is this really the right way to do it?

Why would the code work if it was incorrect? «browsers nowadays are not sensitive for errors» <-- not sure what you mean by that, but they are also the only ones that support these selectors. You don't have to worry about if there's an IE7 bug with combining :not(:first-of-type) with >td because it won’t work no matter what you do. Your syntax is correct.

3 Answers 3

tr.red td:not(:first-child):not(:last-child) < //your styles >

As some have mentioned, td:first-child selects the first child element of the parent TR if it is a TD , whereas td:first-of-type selects the first TD regardless of any TH that may come before it.

As a result, if you have any TH elements in your rows, your code won’t give you all the cells that aren’t first or last.

tr.red > *:not(:last-child):not(:first-child) < /* . your css code . */ >

I think it should work well this way. Even if you wanted to have separate code for TH and TD , you could do it like th:not(:first-child) and td:not(:first-child) .

Typically, :first-of-type is more intuitive when you want to style the first instance of a tag name, (like p:first-of-type ).

It is syntactically correct, as you can quickly check using the W3C CSS Validator. The validator is known to have errors, so in principle, you should check the rule against CSS specifications, especially Selectors Level 3. The result is still that yes, it is correct.

It also has the desired meaning, since this is how selectors combine. You can use :not(. ) selectors to express a condition of type “not . and not . ”.

This applies provided that all children of tr elements are td . If there are header cells, i.e. th elements as well, then the selector applies to those data cells ( td elements) that are not the first data cell or the last data cell in a row with .red class.

Источник

How can I select all children of an element except the last child?

How would I select all but the last child using CSS3 selectors? For example, to get only the last child would be div:nth-last-child(1) .

11 Answers 11

You can use the negation pseudo-class :not() against the :last-child pseudo-class. Being introduced CSS Selectors Level 3, it doesn’t work in IE8 or below:

Make it simple:

You can apply your style to all the div and re-initialize the last one with :last-child:

for example in CSS:

.yourclass < border: 1px solid blue; >.yourclass:last-child

or in SCSS:

• easy to read/remember
• fast to execute
• browser compatible (IE9+ since it’s still CSS3)

Edit: I wrote this at a time :not was not covered by all browsers. Today I would be more balanced and would use this solution in some situations, for instance if you want to override a default behaviour.

For me at least, this has a bad code smell. You are knowingly applying a css rule to an element that you don’t want it to, only to then try to cake another layer to undo it. To me, that’s a bad code smell. I fear that kind of css coding can lead to harder and harder to maintain css. In other words, you’re building spaghetti code css.

this could also work but the problem is when you have many css style like (border, color, font-size etc.) you will need to initialize the css style again to the :last-child. So the suitable solution is using :not(:last-child)

Источник

How to select all children except first and last with CSS selectors

How would I select all the children in a table except for the first and last? I’ve tried this, but it ends up selecting all children that aren’t first and all children that aren’t last, which ends up being all children:

table.programs tr td:not(:first-child), table.programs tr td:not(:last-child)

5 Answers 5

Use two :not() selectors combined, thereby referring to elements that match both of them, i.e. to elements that match neither of the selectors used as operands of :not() :

table.programs td:not(:first-child):not(:last-child) 

@FrankV, you misunderstood the other question and its answer. The question refers to chained :not() selectors but asks whether there is an alternative.

The jQuery solution is fine, but if you want to do it in pure CSS I’d suggest you to apply the rules to the whole table and then reset them for the first and last children. i.e:

table.programs tr td < /* your rules here */ >table.programs tr:first-child td:first-child, table.programs tr:last-child td:last-child < /* reset your rules here */ >

I think your answer is the best, because it’s cross-browser, so 7,8(still actual), windows phones with old ie supports it.

li:nth-child(n+2):nth-last-child(n+2)

table.programs tr td:nth-child(n+2):nth-last-child(n+2) < /* Your Style */ >

I think this should work for you:

table.programs tr td:not(:first-child,:last-child) 

Well, he sad CSS selectors (which jQuery also uses). But considering the syntax he posted, the point is moot =).

Note, if you’re using this in CSS, this is not supported in some older browsers. I would consider giving all your first and last elements first and last classes if possible.

jQuery uses a non-standard version of :not() , so while this is a valid jQuery selector, it is not a valid CSS selector (yet), so it won’t work in a stylesheet. That’s when the distinction between «CSS selector» and «jQuery selector» (from @Barmar’s comment) becomes very important. See What’s the difference in the :not() selector between jQuery and CSS?

Источник