Css not only child

# CSS :not Selector

Just like how JavaScript or ECMAScript have different versions. CSS also have different versions. However, unlike ECMAScript where everything is under one huge category (ES5, ES6, ES7), CSS works in chunks.

For example, they have CSS Selectors Level 3, CSS Grid Layout Level 1, and CSS Flexbox Level 1. The :not selector falls under the CSS Selectors Level 3

specification. The next one that the CSS Working Group is working on is. hint, what comes after 3. ding ding, CSS Selectors Level 4

Rachel Andrew wrote a fantastic article explaining CSS Levels

, I also linked it in the Resource section, so have a read if you’re interested 🤓

# Passing a list of selectors

In the current version, you can only pass in simple selectors as your argument. However, in CSS Selectors Level 4, you will be able to pass in a list of selectors. So cool, right 👏.

/* CSS Selectors Level 3 */ p:not(:first-of-type):not(.special)  > /* CSS Selectors Level 4 */ p:not(:first-of-type, .special)  > 

And here is what will be selected

div> p>1p> p>2p> p>3p> p class="special">4p> p>5p> div> 

# Nesting Negations not allowed 🙈

One thing to point out is that negations maybe not be nested. So this is a no-no:

# :first-child vs :first-of-type

Let’s start by defining them individually:

:first-child only selects the first element IF it is the first child of its parent. That means if it’s not the first child of the parent, nothing will be selected.

:first-of-type will select the first element of the type you specified. Even if it’s not the first child of its parent. So a result will always appear if you use this selector (unless you picked an element that doesn’t exist at all).

Alright, let’s look at some examples.

# Children are all the same type

Because the child type is all the same, the result is the same for both.

# Children are different types

BUT because p is no longer the first child. If you call p:first-child , NOTHING will be selected.

# Selecting First Child

So you might be wondering, what if I don’t care about the type, I just want to select the first child of its parent. In that case, you can do this:

.parent :first-child  color: blue; > 

div class="parent"> h1>h1> p>p> p>p> div> 

# Other similar CSS pseudo-class

And this understanding applies to the other cousin classes:

# Browser Support

The :not selector is supported by most modern browsers and Internet Explorer 9 and up.

# Community Input

: A couple more one-liners that accomplish this as well:

: It’s a powerful tool and as with anything, must be used responsibly. For the example you have, you can get by with a simple:

li  margin-left: 0; > li + li  margin-left: 10px; > 

Источник

How to Select All Child Elements Except the Last One

Sometimes, you may need to select all the child elements except the last element. It’s quite easy to do this using the :not and :last-child pseudo-classes.

The :not pseudo-class specifies elements that do not match a list of selectors and the :last-child selects the element if it is the last child among the other elements.

In our examples, we’ll use the following syntax:

Create HTML

nav> a href="https://www.w3docs.com/learn-html.html">Learn HTML a> a href="https://www.w3docs.com/learn-css.html">Learn CSS a> a href="https://www.w3docs.com/learn-git.html">Learn Git a> a href="https://www.w3docs.com/learn-javascript.html">Learn Javascript a> a href="https://www.w3docs.com/learn-php.html">Learn PHP a> a href="https://www.w3docs.com/snippets">Snippets a> nav>

Add CSS

• Specify the margin property for the element.
• Style and position elements inside using the text-transform, text-decoration, color, font-family, text-align, display and other properties.
• Use the :not and :last-child pseudo-classes for the elements inside and mention the style that should not be applied to the last child element.

nav < margin: 30px; > nav a < text-transform: capitalize; text-decoration: none; color: rgba(60, 60, 60); font-family: sans-serif; padding: 5px 5px; margin-top: 20px; width: 140px; text-align: center; display: inline-block; > nav a:not(:last-child) < border-right: 5px solid #193fe6; >

Example of selecting all child elements except the last one:

html> html> head> title>Title of the document title> style> nav < margin: 30px; > nav a < text-transform: capitalize; text-decoration: none; color: rgba(60, 60, 60); font-family: sans-serif; padding: 5px 5px; margin-top: 20px; width: 140px; text-align: center; display: inline-block; > nav a:not(:last-child) < border-right: 5px solid #193fe6; > style> head> body> nav> a href="https://www.w3docs.com/learn-html.html">Learn HTML a> a href="https://www.w3docs.com/learn-css.html">Learn CSS a> a href="https://www.w3docs.com/learn-git.html">Learn Git a> a href="https://www.w3docs.com/learn-javascript.html">Learn Javascript a> a href="https://www.w3docs.com/learn-php.html">Learn PHP a> a href="https://www.w3docs.com/snippets">Snippets a> nav> body> html>

Result

So, we have created a navigation menu with elements separated by the right border except for the last element.

Let’s see another navigation menu, where we use some CSS properties on all child elements except the last one.

Example of using CSS properties on all child elements except the last one:

html> html> head> title>Title of the document title> style> nav < margin: 30px; > nav a < text-transform: capitalize; text-decoration: none; color: rgba(60, 60, 60); font-family: sans-serif; padding: 5px 5px; margin-top: 20px; width: 140px; text-align: center; display: inline-block; border: 1px solid #000000; border-radius: 10px; > nav a:not(:last-child) < background-color: #a2d4eb; > style> head> body> nav> a href="https://www.w3docs.com/learn-html.html">Learn HTML a> a href="https://www.w3docs.com/learn-css.html">Learn CSS a> a href="https://www.w3docs.com/learn-git.html">Learn Git a> a href="https://www.w3docs.com/learn-javascript.html">Learn Javascript a> a href="https://www.w3docs.com/learn-php.html">Learn PHP a> a href="https://www.w3docs.com/snippets">Snippets a> nav> body> html>

Источник

CSS :not Selector

Instead of using 2 different selectors to assign styling and then another to negate it. Use the :not selector to select every element except those that match the argument you passed through 👍

/* ❌ */ li  margin-right: 10px; > li:first-of-type  margin-right: 0; > /* ✅ Much Better */ li:not(:first-of-type)  margin-right: 10px; > 

Allowed Arguments

• Type Selector
• Universal Selector
• Attribute Selector
• Class Selector
• ID Selector
• Pseudo-class

/* Type */ h1 <> /* Universal */ * <> /* Attribute */ a[title] <> /* Class */ .parent <> /* ID */ #demo <> /* Pseudo-class */ :first-child <> 

CSS Versioning Briefly Explained

Just like how JavaScript or ECMAScript have different versions. CSS also have different versions. However, unlike ECMAScript where everything is under one huge category (ES5, ES6, ES7), CSS works in chunks.

For example, they have CSS Selectors Level 3, CSS Grid Layout Level 1, and CSS Flexbox Level 1. The :not selector falls under the CSS Selectors Level 3 specification. The next one that the CSS Working Group is working on is. hint, what comes after 3. ding ding, CSS Selectors Level 4 😜

Rachel Andrew wrote a fantastic article explaining CSS Levels, I also linked it in the Resource section, so have a read if you’re interested 🤓

Passing a list of selectors

In the current version, you can only pass in simple selectors as your argument. However, in CSS Selectors Level 4, you will be able to pass in a list of selectors. So cool, right 👏.

/* CSS Selectors Level 3 */ p:not(:first-of-type):not(.special) <> /* CSS Selectors Level 4 */ p:not(:first-of-type, .special) <> 

And here is what will be selected

Nesting Negations not allowed 🙈

One thing to point out is that negations maybe not be nested. So this is a no-no:

:first-child vs :first-of-type

Let’s start by defining them individually:

:first-child only selects the first element IF it is the first child of its parent. That means if it’s not the first child of the parent, nothing will be selected.

:first-of-type will select the first element of the type you specified. Even if it’s not the first child of its parent. So a result will always appear if you use this selector (unless you picked an element that doesn’t exist at all).

Alright, let’s look at some examples.

Children are all the same type

Because the child type is all the same, the result is the same for both.

Children are different types

BUT because p is no longer the first child. If you call p:first-child , NOTHING will be selected.

Selecting First Child

So you might be wondering, what if I don’t care about the type, I just want to select the first child of its parent. In that case, you can do this:

.parent :first-child  color: blue; > 

Other similar CSS pseudo-class

And this understanding applies to the other cousin classes:

Browser Support

The :not selector is supported by most modern browsers and Internet Explorer 9 and up.

Resources

Источник