when it is generated by a Content Management System (CMS). However, knowing that the specificity of above rule/selector is actually defined by counting the amount of "simple selectors", helped a lot to understand. ), and the second selector represents descendants. There is a
element which will not get selected and the paragraph element inside the div will also not get selected. Suppose we have to select all

elements that are the siblings of

element, then we can write it as: The figure given below helps us to understand the General sibling selector (~). In this article you'll learn about one of the least popular selectors called CSS Combinators. Combinators are extremely useful when you intend to target specific parts of your document, but it's difficult to reuse the CSS code elsewhere because it's solely for that specific part in your HTML document. The child combinator is represented by >, and this symbol is placed between two selectors (or more). All occurrence of the second selector within the first selector. There is plenty in the CSS Styling that you haven’t seen – but they will be covered in future tutorials. JavaTpoint offers too many high quality services. This combinator only matches the elements that are the immediate child in the document tree. The least being a parent element. Consider the clone page created in an earlier lesson, it had a #content section that contained three columns: You can style ALL p elements in the document using: You can also style all p elements that are immediate children of the #content section using the child combinator: But the child combinator will not select p elements if they are nested deeper: The descendant combinator allows you to create a selector for ALL p elements located inside a #content container – you can select immediate children, grandchildren and more deeply nested elements. The descendant combinator is more general than the child combinator and is useful for styling different sections of your document without having to specify the exact parent-child relationships. The first occurrence of the second selector after the first selector in the document hierarchy. The CSS combinators are included in between the simple selector. While
    is a child of
    and a sibling, to

    ,

    ,

    , , and

    , it is also, , Select a

    element if it immediately follows, You might want the first paragraph following,

    to be special in some way - perhaps a, slightly larger font or italicized. It is useful when we have to select the siblings of an element even if they are not adjacent directly. Consider the following (based on the More Advanced float Example): This is the most commonly used combinator. It is represented by the addition symbol in mathematics i.e. 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. parent-child relationships match the selector. Your email address will not be published. It only selects the element which is just next to the specified first element. So the combinators are just not counted to the specificity declaring number. This combinator matches an element if it is next to an element in a document hierarchy. The position of the child. Between the simple selectors, we can include a combinator. The combinators are classified into four groups: The word "descendant" should give you an idea that for the combinator to match any element, an ancestor element must exist. Save my name, email, and website in this browser for the next time I comment. We're a place where coders share, stay up-to-date and grow their careers. Copies are sold in stores worldwide, or you can buy it in ebook form here . There are other selector types you can use (which will be covered over the next few tutorials) but, for now, it is accurate enough. Consider the following HTML code and the selector declared above: While I wrote the selector with a space around the combinator, there is no need for that. The combinators can be combined and you can more use more specific combinations of html elements, IDs, classes, and attributes: There is no combinator that allows you to select. Mail us on hr@javatpoint.com, to get more information about given services. Open source and radically transparent. In this chapter, you will learn about the descendant combinator and its working. I pulled the CSS from the main landing pages of the following: Take these numbers as a rough guide to their relative use – if you find yourself using a lot of, This is not entirely accurate. The

    tag will NOT be selected because the, parent-child relationships do not match the. It can be a direct child or deeper than five levels, but it will still be referred to as a descendant. It only selects those paragraph elements that are the direct child of the div element. In this article we discussed combinator selectors which is a class of CSS selectors that are sparingly used compared to class selectors and ID selectors but sometimes come in handy when the markup is not large (and hopefully not) and you have no control over the HTML markup e.g. Templates let you quickly answer FAQs or store snippets for re-use. This example will illustrate the use of a General sibling selector (~). If we have to select the paragraph that comes immediately after another paragraph, then by using the adjacent selector, it will be written as follows: The figure given below helps us to understand the Adjacent sibling selector (+). It matches the second element only when the element immediately follows the first element, and both of them are the children of the same parent. The word descendant indicates nested anywhere in the DOM tree. In this figure, the blocks with the green color are the selected blocks affected after using the child selector. Assuming "CSS selector" and "CSS rule" being the exact same, your answer might bring some confusion. As well, processing from the inner elements to the outer elements is computationally more expensive – making page renders slower. 'rem' will be covered in a future tutorial. But those

    elements that come after the

    will be affected. As you recall, when you create your HTML page, you divide the page into various sections. In the example above, it selects an element with the class of .headline only if it is an immediate child of an element with the class of .card AND the element with the class of .card is an immediate child of an element with the class of .column-left.. ... Pseudo-classes can be combined with CSS classes: When you hover over the link in the example, it will change color: Example. This is useful for defining styles that are localized to particular sections of your webpage without having to rigidly follow the structure of your page: Remember to pay attention to the specificity of your selector: This is also known as the first sibling combinator and adjacent sibling combinator. There is an
    element that will not be selected, and the paragraph element after the div will also not be selected. This allows for more powerful selection. The first two combinators allow you to select HTML elements based on how they are contained within other HTML elements – either as children, grandchildren, great-grandchildren, etc.