Css только прямой потомок

CSS selectors for test automation — selector types and syntax

What is selector in CSS — it’s a description of the element (or group of elements) that shows your web browser what element should be selected to apply some styling. Let’s go through the main types of CSS selectors.

1) .Х or [class=»X»]

CSS selector by class Х. The difference between the id and class is that while several elements on the page can have the same class, an id is always unique and should be used only for one element on the page. So in brief:

• Classes should be used to apply the same style to several elements
• Id should be used to apply the style to one particular element

2) #X or [id=»X»]

CSS selector by id. The number sign (hash, or pound sign) in front of the CSS selector X selects an element that has an id that equals X. While adding styles by id you should always keep in mind that this id should be unique — only one such id should be present on the page. Therefore, it is better to use selectors by classes, combinations of classes or tag names. However, selectors by id are perfectly used in test automation, because they allow you to target a desired element and have confidence that there is only one such element on the page.

3) *

CSS selector for all elements. An asterisk character chooses all the items that are on the page. Many developers use it in order to remove (reset) the values of indents ( margin and padding ) for all elements on the page. Nevertheless, in practice it is better not to do that because this CSS selector is quite heavy for a browser (as it has to loop through each and every item on the page).

The * symbol can also be used to highlight all child elements:

In this example, all child elements (descendants) of the element with id header are targeted. But it is always worth remembering that this selector is quite heavyweight.

4) X

CSS selector by type. How to choose all elements of the same type, if they do not have any ids or classes? Try using CSS selector by element type. For example, to select all ordered lists on the page, use the ol <. >as shown above.

5) Х Y

CSS selector of all descendants or CSS selector of all child elements is one of the most widespread. It is used if you need to select the elements of a certain type from a number of child elements. For example, apply it if you need to highlight all links that are inside a li element. While using chains of such selectors, always ask yourself — is it possible to target an element by writing a shorter sequence of selectors?

6) Х + Y

The adjacent element selector selects only the element of type Y, which goes immediately after the element X. In this case, each paragraph that goes immediately after each div element will receive a specified font-family and font-size .

7) Х > Y

CSS selector of direct descendants. The difference between selectors X Y and X > Y is that the latter will select only direct subsidiaries (in other words it will choose only direct descendants). For instance:

CSS selector #content > ul will pick only a ul that is a direct descendant of div with id=»container» . It will ignore a ul that is a descendant of the first li . This CSS selector is rather fast and lightweight.

8) Х ~ Y

Sister (sibling) elements selector is less strict than X + Y. It will target not only the first, but all p elements that go after ol .

9) X:visited and X:link

CSS selector by pseudo-class link is used to target all links that were not clicked. If you want to target all clicked links — use pseudo class visited.

10) X[title]

CSS selector by attribute. In the example above we target only links that have attribute title .

11) X[href=»foo»]

CSS selector by attribute value that equals to something. Only links with attribute href that equals https://www.stijit.com/ will be targeted and will become yellow.

12) X[href*=»stijit»]

CSS selector by attribute value that contains something. Star symbol * means that a value should be somewhere in the attribute of the element (for example in any part of the href attribute). This way all links with https://www.stijit.com/ , www.stijit.com and stijit.com will be targeted.

13) X[href^=»http»]

CSS selector by attribute value that starts with something. Sometimes on some websites you can observe links with small arrow icons near them (to indicate that the link is external). Caret symbol ^ means the beginning of a string. This way all links that have href beginning with http will be targeted.

14) X[href$=».jpg»]

CSS selector by attribute value that ends with something. Here dollar symbol $ is used to capture the end of string. This way all links that have href attribute ending with .jpg (lead to jpg images) will be targeted.

15) X[data-*=»foo»]

CSS selector by custom attribute. For example targets all links that have a custom data-filetype attribute that equals image .

This way all links that lead to any images can be targeted.

16) X[foo~=»bar»]

CSS selector by attribute value divided by spaces. Tilde symbol ~ is used to target elements that have a particular attribute value divided by spaces. For example if an element has data-info attribute that has several values divided by spaces:

Now using ~ symbol we can select elements with particular words inside attribute values:

Select element with data-info containing a word external :

17) X:checked

CSS selector by pseudo-class checked. This pseudo class will target only checkbox or radio button elements and only when they are already in the checked state.

18) X:after

CSS selector by pseudo-class after. Pseudo classes :before and :after are used to create content before and after the selected element.

Here pseudo-class :after following the element with class clearfix creates an empty string and then it gets cleared. This approach is used in cases where overflow: hidden can not be utilized.

19) X:hover

CSS selector by pseudo-class hover. Pseudo class :hover is used to apply styles to the element when it gets hovered by mouse pointer. Old versions of Internet Explorer apply :hover only to the links.

• IE6+ (В IE6 применимо только к ссылкам)
• Chrome
• Firefox
• Safari
• Opera

20) X:not(selector)

CSS selector by pseudo-class not (negation) can be used for example to target all div elements except divs that have id=»content» .

The same way all elements except p can be selected:

21) X::pseudoElement

CSS selector by pseudo-element. Pseudo elements are used to apply styles to the fragments of the elements — for example to the first line of a paragraph or the first letter of a word. It can be applied to the block elements only.

Selection of the first line of a paragraph:

22) X:first-child

CSS selector by pseudo-class first-child selects only the first descendant of a parent element. It is often used to remove a border for the first element of a list. This pseudo class was available starting from CSS 1.

23) X:last-child

CSS selector by pseudo-class last-child targets the last descendant of a parent element. It is available starting from CSS 3.

• IE9+ (IE8 supports first-child, but not the last-child. Microsoft (с))
• Chrome
• Firefox
• Safari
• Opera 9.6+
• Android
• iOS

24) X:only-child

CSS selector by pseudo-class only-child selects elements that are the only descendants of a parent element.

• IE9+
• Chrome
• Firefox
• Safari 3.0+
• Opera 9.6+
• Android
• iOS

25) X:nth-child(n)

CSS selector by pseudo-class nth-child targets a child element by number provided as a parameter. Selector nth-child accepts an integer as a parameter (starting from 1, so to select a second item in a list use li:nth-child(2) ). All pseudo classes with nth-child are available starting from CSS 3.

• IE9+
• Chrome
• Firefox 3.6+
• Safari 3.1+
• Opera 9.6+
• Android 2.1+
• iOS 2.0+

26) X:nth-last-child(n)

CSS selector by pseudo-class nth-last-child. What if you have a long list of li elements inside ul and you need to target the third li from the end of the list? Instead of something like li:nth-child(109) you can use a last elements selector — nth-last-child. This pseudo class works the same as nth-child, but starts counting from the end instead of the beginning.

• IE9+
• Chrome
• Firefox 3.6+
• Safari 3.1+
• Opera 9.6+
• Android 2.1+
• iOS 2.0+

27) X:nth-of-type(n)

CSS selector by pseudo-class nth-of-type. In case if you have four unordered lists on a page and you have to target only the third of them — use :nth-of-type(3) .

• IE9+
• Chrome
• Firefox 3.6+
• Safari 3.1+
• Opera 9.6+
• Android 2.1+
• iOS 2.0+

28) X:nth-last-of-type(n)

CSS selector by pseudo-class nth-last-of-type(n) is used to select n-th element of a particular type starting from the end.

• IE9+
• Chrome
• Firefox 3.6+
• Safari 3.1+
• Opera 9.6+
• Android 2.1+
• iOS 2.0+

29) X:only-of-type

CSS selector by pseudo-class only-of-type targets elements that do not have any siblings of the same type. For example li will be selected, but only if it is the only li element inside its parent ul .

• IE9+
• Chrome
• Firefox 3.5+
• Safari 3.1+
• Opera 9.6+
• Android 2.1+
• iOS 2.0+

30) X:first-of-type

ul:first-of-type > li:nth-child(3)

CSS selector by pseudo-class first-of-type selects the first element of a particular type.

• IE9+
• Chrome
• Firefox 3.5+
• Safari 3.1+
• Opera 9.5+
• Android 2.1+
• iOS 2.0+

Top articles

How to display current git branch and colours in terminal.

CSS selectors for test automation — selector types and syntax.

Add jquery library to a website page.

Get in touch

© 2011-2022 Stijit | All rights reserved | Images: Unsplash

Источник