Главная » Языки программирования

Simple Example of CSS adjacent sibling selectors

На чтение 6 мин
Содержание
  1. Смежные селекторы
  2. Синтаксис
  3. Пример
  4. Спецификации
  5. Поддержка браузерами
  6. Смотрите также
  7. Found a content problem with this page?
  8. MDN
  9. Support
  10. Our communities
  11. Developers
  12. CSS Combinators
  13. Descendant Selector
  14. Example
  15. Child Selector (>)
  16. Example
  17. Adjacent Sibling Selector (+)
  18. Example
  19. General Sibling Selector (~)
  20. Combinators
  21. Descendant combinator
  22. Child combinator
  23. Test your skills!
  24. Summary
  25. Found a content problem with this page?
  26. CSS adjacent sibling selectors

Смежные селекторы

Указывает на смежный или следующий селектор. Обеспечивает выбор только элемента расположенного непосредственно за определённым в первой части элементом.

Синтаксис

former_element + target_element

Пример

li:first-of-type + li  color: red; > 
ul> li>Одинli> li>Дваli> li>Триli> ul>

Так же может использоваться для задания стиля определённого класса «caption span» следующих вложенных элементов:

img + span.caption  font-style: italic; >

сработает только на тех тегах span, для которых задан класс caption:

img src="photo1.jpg">span class="caption">Первая фоткаspan> img src="photo2.jpg">span class="caption">Втораяspan>

Спецификации

Поддержка браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

This page was last modified on 7 нояб. 2022 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

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:

Источник

Combinators

The final selectors we will look at are called combinators, because they combine other selectors in a way that gives them a useful relationship to each other and the location of content in the document.

Prerequisites: Basic computer literacy, basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps.)
Objective: To learn about the different combinator selectors that can be used in CSS.

Descendant combinator

The descendant combinator — typically represented by a single space (» «) character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent’s parent, parent’s parent’s parent, etc.) element matching the first selector. Selectors that utilize a descendant combinator are called descendant selectors.

Child combinator

The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first. Descendant elements further down the hierarchy don’t match. For example, to select only elements that are direct children of elements:

css

Adjacent sibling combinator
The adjacent sibling selector (+) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the next sibling element of the first selector. For example, to select all elements that are immediately preceded by a element:
 
css
General sibling combinator
If you want to select siblings of an element even if they are not directly adjacent, then you can use the general sibling combinator (~). To select all elements that come anywhere after elements, we'd do this:
 
css
Using combinators
You can combine any of the selectors that we discovered in previous lessons with combinators in order to pick out part of your document. For example, to select list items with a class of "a" which are direct children of a , try the following:
 
css
ul > li[class="a"]  > 
 
Take care, however, when creating big lists of selectors that select very specific parts of your document. It will be hard to reuse the CSS rules since you have made the selector very specific to the location of that element in the markup.
 
It is often better to create a simple class and apply that to the element in question. That said, your knowledge of combinators will be very useful if you need to style something in your document and are unable to access the HTML, perhaps due to it being generated by a CMS.
 
Test your skills!
 
You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: Selectors.
 
Summary
 
This is the last section in our lessons on selectors. Next, we'll move on to another important part of CSS — the cascade, specificity, and inheritance.
 
Found a content problem with this page?
 
This page was last modified on Jun 30, 2023 by MDN contributors.
 
Your blueprint for a better internet.
 
Источник
 
CSS adjacent sibling selectors
 
CSS adjacent sibling selectors come as a pair of selectors and select the second one, if it immediately follows the first one in order of appearance in an HTML page.
 
If, x, y and z are three HTML elements and y and z resides next to each other within x, then y and z are called as adjacent sibling selectors.
 
While writing adjacent sibling selectors, selectors must be separated with "+" combinator.
 
Simple Example of CSS adjacent sibling selectors
 
      
w3resource CSS examples
 
w3resource CSS CSS adjacent selectors examples
 
    
simple-example-CSS-adjacent-sibling-selector 
 
Advanced Example of CSS adjacent sibling selectors
 
       
 
w3resource CSS examples.
 
   
 
advanced-example-CSS-adjacent-sibling-selector 
 
Follow us on Facebook and Twitter for latest update.
 
     
  • Weekly Trends
    •  
  • Java Basic Programming Exercises
    •  
  • SQL Subqueries
    •  
  • Adventureworks Database Exercises
    •  
  • C# Sharp Basic Exercises
    •  
  • SQL COUNT() with distinct
    •  
  • JavaScript String Exercises
    •  
  • JavaScript HTML Form Validation
    •  
  • Java Collection Exercises
    •  
  • SQL COUNT() function
    •  
  • SQL Inner Join
    •  
  • JavaScript functions Exercises
    •  
  • Python Tutorial
    •  
  • Python Array Exercises
    •  
  • SQL Cross Join
    •  
  • C# Sharp Array Exercises
    •  
 
We are closing our Disqus commenting system for some maintenanace issues. You may write to us at reach[at]yahoo[dot]com or visit us at Facebook
 
Источник
 
Читайте также:  Что влияет на питона
 
 
 
 
Оцените статью
 
 
 
  
     
 
 
   
 
 
 
 
 
 
 
 
 
 
 
 © 2023 Программирование