CSS | Комбинаторы
Комбинаторы CSS объясняют взаимосвязь между двумя селекторами. Селекторы CSS - это шаблоны, используемые для выбора элементов для целей стиля. Селектор CSS может быть простым селектором или сложным селектором, состоящим из более чем одного селектора, соединенного с помощью комбинаторов.
В CSS доступны четыре типа комбинаторов, которые обсуждаются ниже:
- Селектор общих братьев и сестер (~)
- Селектор Adjecant Sibling (+)
- Дочерний селектор (>)
- Селектор потомков (пробел)
General Sibling selector: The general sibling selector is used to select the element that follows the first selector element and also share the same parent as the first selector element. This can be used to select a group of elements that share the same parent element.
<!DOCTYPE html><html><head> <title>Combinator Property</title> <style> div ~ p{ color: #009900; font-size:32px; font-weight:bold; margin:0px; text-align:center; } div { text-align:center; } </style></head> <body> <div>General sibling selector property</div> <p>GeeksforGeeks</p> <div> <div>child div content</div> <p>G4G</p> </div> <p>Geeks</p> <p>Hello</p></body></html> |
Выход:
Adjacent Sibling selector: The Adjacent sibling selector is used to select the element that is adjacent or the element that is the next to the specified selector tag. This combinator selects only one tag that is just next to the specified tag.
<!DOCTYPE html><html><head> <title>Combinator Property</title> <style> div + p{ color: #009900; font-size:32px; font-weight:bold; margin:0px; text-align:center; } div { text-align:center; } p { text-align:center; } </style></head> <body> <div>Adjacent sibling selector property</div> <p>GeeksforGeeks</p> <div> <div>child div content</div> <p>G4G</p> </div> <p>Geeks</p> <p>Hello</p></body></html> |
Выход:
Child Selector: This selector is used to select the element that is the immediate child of the specified tag. This combinator is stricter than the descendant selector because it selects only the second selector if it has the first selector element as its parent.
<!DOCTYPE html><html><head> <title>Combinator Property</title> <style> div > p{ color: #009900; font-size:32px; font-weight:bold; margin:0px; text-align:center; } div { text-align:center; } p { text-align:center; } </style></head> <body> <div>Child selector property</div> <p>GeeksforGeeks</p> <div> <div>child div content</div> <p>G4G</p> </div> <p>Geeks</p> <p>Hello</p></body></html> |
Выход:
Descendant selector: This selector is used to select all the child elements of the specified tag. The tags can be the direct child of the specified tag or can be very deep in the specified tag. This combinator combines the two selectors such that selected elements have an ancestor same as the first selector element.
<!DOCTYPE html><html><head> <title>Combinator Property</title> <style> div p{ color: #009900; font-size:32px; font-weight:bold; margin:0px; text-align:center; } div { text-align:center; } p { text-align:center; } </style></head> <body> <div>Descendant selector property</div> <p>GeeksforGeeks</p> <div> <div>child div content</div> <p>G4G</p> <p>Descendant selector</p> </div> <p>Geeks</p> <p>Hello</p></body></html> |
Выход: