Next element after css

CSS selectors

CSS selectors define the pattern to select elements to which a set of CSS rules are then applied.

CSS selectors can be grouped into the following categories based on the type of elements they can select.

Basic selectors

Selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces.

Syntax: * ns|* *|*

Example: * will match all the elements of the document.

Selects all elements that have the given node name.

Syntax: elementname

Example: input will match any element.

Selects all elements that have the given class attribute.

Syntax: .classname

Example: .index will match any element that has class=»index» .

Selects an element based on the value of its id attribute. There should be only one element with a given ID in a document.

Syntax: #idname

Example: #toc will match the element that has id=»toc» .

Selects all elements that have the given attribute.

Syntax: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]

Example: [autoplay] will match all elements that have the autoplay attribute set (to any value).

Grouping selectors

The , selector is a grouping method that selects all the matching nodes.

Syntax: A, B

Example: div, span will match both and elements.

Combinators

The » » (space) combinator selects nodes that are descendants of the first element.

Syntax: A B

Example: div span will match all elements that are inside a element.

The > combinator selects nodes that are direct children of the first element.

Syntax: A > B

The ~ combinator selects siblings. This means that the second element follows the first (though not necessarily immediately), and both share the same parent.

Syntax: A ~ B

Example: p ~ span will match all elements that follow a , immediately or not.

The + combinator matches the second element only if it immediately follows the first element.

Syntax: A + B

Example: h2 + p will match the first element that immediately follows an h2 element.

The || combinator selects nodes which belong to a column.

Syntax: A || B

Example: col || td will match all elements that belong to the scope of the .

Pseudo-classes and pseudo-elements

The : pseudo allow the selection of elements based on state information that is not contained in the document tree.

Example: a:visited will match all elements that have been visited by the user.

The :: pseudo represent entities that are not included in HTML.

Example: p::first-line will match the first line of all elements.

Structure of a selector

The term ‘selector’ can refer to one of the following:

A selector with a single component, such as a single id selector or type selector, that’s not used in combination with or contains any other selector component or combinator. A given element is said to match a simple selector when that simple selector accurately describes the element. All basic selectors, attributes, and single pseudo-classes and pseudo-elements are simple selectors.

A sequence of simple selectors that are not separated by a combinator. A compound selector represents a set of simultaneous conditions on a single element. A given element is said to match a compound selector when the element matches all the simple selectors in the compound selector.

In a compound selector, the type selector or a universal selector in a compound selector must come first in the sequence of selectors. Only one type selector or universal selector is allowed in the sequence. Since whitespace represents the descendant combinator, no whitespace is allowed between the simple selectors in a compound selector.

Example: a#selected

A sequence of one or more simple and/or compound selectors that are separated by combinators. A complex selector represents a set of simultaneous conditions on a set of elements. These conditions apply in the context of relationships described by the combinators. A given element is said to match a complex selector when the element matches compound selectors and the combinators between the compound selectors.

Examples: a#selected > .icon <. >, .box h2 + p <. >, a .icon

A selector representing an element relative to one or more anchor elements preceded by a combinator. Relative selectors that don’t begin with an explicit combinator have an implied descendant combinator.

Examples: + div#topic > #reference <. >, > .icon <. >, dt:has(+ img) ~ dd

A comma-separated list of simple, compound, or complex selectors. If the constituent selector type of a selector list is important but unspecified, it is called a complex selector list. A given element is said to match a selector list when the element matches any (at least one) of the selectors in that selector list. Read more about when a selector list is deemed invalid and how to construct a forgiving selector list.

Example: #main, article.heading

Specifications

See the pseudo-class and pseudo-element specification tables for details on those.

See also

Источник

How to Select the Next Element in CSS

The adjacent sibling combinator (+) is used to separate two selectors and match the second element only when it follows the first element immediately, and they have the same parent element.

In the following example, we use the adjacent sibling combinator to ensure that element which follows the «example» of the element will use the CSS clear property with its «both» value.

Example of selecting the next element with the adjacent sibling selector:

html> html> head> title>Title of the document title> style> h1.example < float: left; font-size: 28px; color: #0d50bd; font-weight: bold; margin: 10px 0px; > h1.example + p < clear: both; > style> head> body> h1 class="example">Lorem Ipsum h1> p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. p> body> html>

Result

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Example of using the adjacent sibling combinator:

html> html> head> title>Title of the document title> style> li:first-of-type + li < color: #00d42a; > style> head> body> ul> li>First line li> li>Second line li> li>Third line li> ul> body> html>

Источник

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:

Источник