Css selector all next siblings

Sibling Selectors In CSS

It’s tough to imagine a website without CSS and nowadays JavaScript too. JavaScript gives more functionalities to the website. But if you are newbie, you have just started your webdev career and you have creative ideas but you don’t have JavaScript knowledge to add some of those JavaScript functionalities to your design, so here I’m explaining you about one of those ideas like a toggle menu or sliding task bar menu or a carousel gallery or testimonials and all, which you have seen but never tried to design because of JavaScript.
So here I explain you about CSS Next and Previous (yes PREVIOUS) sibling element selector.
Let’s first talk about Next Sibling Selectors:-

+ Next Sibling Selector

Using next sibling selector you can change the properties of the element that is directly after your another specific element or you can say using this you can change the properties of adjacent sibling element.

As you can see in above snippet there is a + sign in between h1 and p tag, here p is the adjacent sibling to h1. So now if you hover over h1 you can see change in properties of p tag.

~ General Next Sibling Selector

Using general next sibling selector you can select any or all of the succeeding sibling elements whereas using next sibling selector we can only select adjacent sibling element.

As you can see in above snippet there is a ~ sign in between h1 and p tag but there is also an another sibling h2 tag in between but it won’t affect and you can change properties of p tag although p is not next adjacent sibling of h1.
If you want then you can also change the properties of h2 which is in between h1 and p, along with change in properties of p tag. So far we talked about next sibling selectors, but what about previous sibling selectors ?
Unfortunately in CSS we don’t have any such previous sibling selectors, but yes in axe(ACSSSS)- Augmented Cascading Style Sheet Syntax, we have previous or preceding sibling selectors.

When using ACSSSS remember to add this library in your html file:-

 src="https://rouninmedia.github.io/axe/axe.js"> 

? Immediate Previous Sibling Selector

Using previous sibling selector we can change the properties of the element that is directly before your another specific element or you can say using this you can change the properties of immediate preceding element.

As you can see in above snippet there is a ? sign in between p and h1 tag, here h1 is immediate preceding sibling to p. So now if you hover over p tag you can see changes in h1 tag.

! General Previous Sibling Selector

Using general previous sibling selector you can select any or all of the previous or preceding sibling elements whereas using previous sibling selector we can only select immediate previous sibling element.

As you can see in above snippet there is a ! sign in between p and h1 tag, but there is also a another sibling h2 tag in between but it won’t affect and you can change properties of h1 tag although h1 is not immediate preceding sibling of p tag.
If you want then you can also change the properties of h2 which is in between h1 and p, along with change in properties of p tag. This will be more clear by example below:-

Источник

CSS Combinators

A combinator is something that explains the relationship between the selectors.

A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

There are four different combinators in CSS:

• descendant selector (space)
• child selector (>)
• adjacent sibling selector (+)
• general sibling selector (~)

Descendant Selector

The descendant selector matches all elements that are descendants of a specified element.

The following example selects all

elements inside elements:

Example

Child Selector (>)

The child selector selects all elements that are the children of a specified element.

The following example selects all

elements that are children of a element:

Example

Adjacent Sibling Selector (+)

The adjacent sibling selector is used to select an element that is directly after another specific element.

Sibling elements must have the same parent element, and «adjacent» means «immediately following».

The following example selects the first

element that are placed immediately after elements:

Example

General Sibling Selector (~)

The general sibling selector selects all elements that are next siblings of a specified element.

The following example selects all

elements that are next siblings of elements:

Источник

CSS Selectors Every Web Developer Must Know in 2023

A comprehensive guide can help web developers avoid common mistakes and adopt a consistent, efficient approach to using CSS selectors.

This guide is a one-stop for all of the most useful and popular CSS selectors for developers to reference.

What are selectors in CSS?

CSS Selectors are used to target specific elements on the web page. In addition, selectors are the key to the whole process of styling and altering the web page and its elements.

There are several types of css selectors and you are going to learn almost all of them.

Class Selector

CSS class selector plays a very important role when we talk about layout or structure. So you can say it’s a must-have selector in your code.

• The symbol period or dot (.) is used to select a class in css.
• The class can be used to select multiple elements at a time.
• Class is reusable

Change the background color of all the elements with the class name «modal«.

ID CSS Selector

ID selectors are used to target an element on the page that is unique. It stands for «Identifier».

• The symbol hash (#) is used to select an id in class
• It should be unique for a page or document.
• IDs are not reusable. You should never prefer to use more than one on a page.

Change the background color of the home page.

Universal CSS Selector

Universal selector (*) is a CSS selector that matches every element.

• The Symbol Asterix (*) is used to select all elements.
• Developers mainly use it to reset the browser default padding, margins, and few behaviors
• You should always use it.

Reset all the browser default padding and margin to zero.

Grouping CSS Selector

Consider it an optimization selector. You can group multiple selectors and apply common styles to them. Pretty useful.

• The Symbol comma (,) is used to select multiple elements at a time.
• Developers mainly use it to optimize the code
• It reduces the time of writing same code for multiple times for similar elements

There are four button variations. But we only need to apply border-radius to .btn-primary and .btn-secondary

Use grouping CSS selector:

Element CSS Selector

The element or type selector allows us to choose any HTML element with its name on the page and start styling it with CSS rules.

• You can select any element with the name
• It’s pretty straightforward
• Developers mainly use it to add default styles for the elements

Add font-family, font-size to the body element

Descendant Selector

The descendant combinator selector includes all elements that are children of the current element. In CSS, this means it affects any child node.

• There is no symbol, just a gap is used between parent and children
• It’s a very common css selector

Select all the paragraph elements inside a container and add red color to them.

Direct Child CSS Selector

Child combinator CSS Selector selects all the specified direct children of the parent.

• Greater symbol (>) is used to select the direct children.
• It is a very rare but necessary css selector.

Add background-color to only those button elements which are direct children of .container

Adjacent Sibling Selector

The adjacent sibling selector selects all of the siblings that are next to each other on the same line.

• It contains ‘+‘ sign.
• Developers use it for many use cases
• First come first serve, it selects the first element that comes after the sibling.

Add display: none; to property to all the direct (first) span elements which are next to div elements

General sibling selector

All elements that are next siblings of the specified element are selected by the general sibling selector.

• It contains ‘~‘ sign.
• It selects all the specified next siblings of element

Add color:black; to all the specified next siblings(p) of element (div).

Attribute Selector

It selects the elements based on given attributes.

• You can use square brackets [ ] to select the attributes
• It’s a powerful CSS selector, developers use it by applying conditions
• There are several conditions, which you can use smartly with attribute selector(=, ~=, ^=, $=, *=, attribute|=»value»)

Syntax with examples:

You can utilize an attribute selector based on several different conditions and those conditions with examples are given below.

Equal [attribute=»value»]

Add red color to all the anchor elements where href is equal to hash «#»

Contain [attribute ~= «value»] Restricted

Add border-radius to all the img elements where alt tag contains a word «circle»

Quick Note: A value needs to be a whole word.

Contain [attribute *= «value»] Flexible

Add 500px of width to all the img elements where the alt tag contains a word «opt»

Quick Note: A value doesn’t need to be a whole word

If there are 3 images with alt tags (optimize-img, optimizeimg, optimize-img). It will select all three images. Because each one contains opt.

Start with [attribute|=»value»] Restricted

Add the 500px width to all the img elements where alt tag begins with «optimize» value

Quick Note: A value needs to be a whole word

if there are 3 images with alt tags (optimize-img, optimizeimg, optimize-img). It will only select the first and third images. Because the second one is not a complete word.

Start with [attribute^=»value»] Flexible

Add the border-radius to all the img elements where alt tag begins with «radius» value

Quick Note: A value doesn’t need to be a whole word

If there are 3 images with alt tags (radius-circle, radiuscircle, radius-circle). It will select all three images. Because all of them begin with radius.

Ends With [attribute$=»value»]

Add the red color to all the paragraphs where class attribute value ends with alert.

Quick Note: The value does not have to be a whole word!

And Yeah! That’s all for attribute css selectors.

First Child Selector

As the name suggests, it selects the first child from the list of children.

• :first-child is a pseudo-class
• Developers use it for many cases especially (adding the spacing at the top of list)

Add margin-top at the first item of the categories list.

Last Child Selector

As the name suggests, it selects the last child from the list of children.

• :last-child is a pseudo class
• Developers use it for many cases especially (adding the spacing at the end of list)

Add border-bottom at the end of the categories list (item).

First Letter Selector

It selects the first letter of the paragraph.

• ::first-letter is a pseudo-element
• It is pretty useful in making the first letter capital or big (like you see in the newspaper)

Increase the font size of the first letter of every paragraph.

First Line Selector

Similar to the first letter, you can even select the first line of a paragraph.

Increase font weight of first line of every paragraph.

:nth-child(value) CSS Selector

Similar to the :first-child and :last-child, it selects the element based on the given value.

Add background-color to the 5th children of 11 boxes.

Conclusion

It is essential to know about CSS selectors so that you can use them correctly in your projects.

In this tutorial, you learned about the most important CSS selectors, which you will see from time to time. You can always use it as a one-stop CSS Selectors cheat sheet.

Extremely Powerful CSS Selector

Before you go, there is an extremely powerful conditional-based CSS selector which I didn’t mention.

Don’t worry, I have also got it covered in a stand-alone guide. Go ahead and look into :not css selector

Make sure to share this guide with others & subscribe to our newsletter for more quick web development tutorials.

Источник