home · Errors · CSS selectors. Selectors CSS3 Css select all elements

CSS selectors. Selectors CSS3 Css select all elements

What is a selector in css is a description of that element or group of elements that tells the browser which element to select to apply a style to it. Let's look at basic CSS selectors.

1) .X

.topic-title ( background-color: yellow; )

CSS class selector X. The difference between id and class is that several elements on a page can have the same class, but id is always unique. Classes should be used to apply the same style to multiple elements.

  • Chrome
  • Firefox
  • Safari
  • Opera

2) #X

#content (width: 960px; margin: 0 auto; )

CSS id selector. The hash sign before the CSS selector X selects an element whose id = X. When assigning styles by id, it is always worth remembering that it must be unique - only one such id should be on the page. Therefore, it is better to use selectors by classes, combinations of classes, or tag names. However, id selectors are great for automated testing because... They allow you to immediately interact with exactly the desired element and have confidence that there is only one of its kind on the page.

    Which browsers are supported:
  • Chrome
  • Firefox
  • Safari
  • Opera

3) *

* ( margin: 0; padding: 0; )

CSS selector for all elements. The star symbol selects all elements that are on the page. Many developers use it to remove (zero) the margin and padding values ​​of all page elements. However, in practice it is better not to do this because this CSS selector loads the browser quite heavily by searching through all the elements on the page.

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

#header * ( border: 5px solid gray; )

This example selects all children (descendants) of the element with #header . But it's always worth remembering that this selector is quite heavy for the browser.

    Which browsers are supported:
  • Chrome
  • Firefox
  • Safari
  • Opera

4) X

a ( color: green; ) ol ( margin-left: 15px; )

CSS type selector. How to select all elements of the same type if they have neither id nor classes? It's worth using a CSS element type selector. For example, to select all ordered lists on a page, use ol(...) as shown above.

    Which browsers are supported:
  • Chrome
  • Firefox
  • Safari
  • Opera

5) X Y

li a (font-weight: bold; text-decoration: none; )

CSS descendant selector or CSS child element selector is used most often. It is used if it is necessary to select elements of a certain type from many child elements. For example, you need to select all the links that are in the li element. In this case, use this selector. When using chains of such selectors, always ask yourself whether an even shorter sequence of selectors could be used to highlight a given element.

    Which browsers are supported:
  • Chrome
  • Firefox
  • Safari
  • Opera

6) X + Y

div + p ( font-family: "Helvetica Neue", Arial, sans-serif; font-size: 18px; )

Adjacent element selector chooses only an element of type Y that comes immediately after the X element. In this case, each paragraph immediately after each div element will receive a special font type and size.

    Which browsers are supported:
  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Chrome

7) X > Y

#content > ul ( border: 1px solid green; )

CSS descendant selector. The difference between the X Y and X > Y selectors is that the CSS selector in question will only select immediate children of elements (it will select only direct descendants). Eg:

  • List item
    • Descendant of the first element of the list
  • List item
  • List item

The CSS selector #content > ul will only select a ul that is a direct child of the div with id="container" . It will not select a ul that is a child of the first li. This is a fairly speedy CSS selector.

    Which browsers are supported:
  • Chrome
  • Firefox
  • Safari
  • Opera

8) X ~ Y

ol ~ p ( margin-left: 10px; )

Selector of sister (subling) elements less strict than X + Y. It will select not only the first one, but also all other p elements following ol.

    Which browsers are supported:
  • Chrome
  • Firefox
  • Safari
  • Opera
a:link ( color: green; ) a:visited ( color: gray; )

Pseudo-class:link used to select all links that have not yet been clicked. If you need to apply a certain style to already visited links, then use pseudo-class:visited.

    Which browsers are supported:
  • Chrome
  • Firefox
  • Safari
  • Opera

10) X

a(color:red;)

CSS attribute selector. This example selects only those links that have a title attribute.

    Which browsers are supported:
  • Chrome
  • Firefox
  • Safari
  • Opera

11) X

a ( color: yellow; )
    Which browsers are supported:
  • Chrome
  • Firefox
  • Safari
  • Opera

12) X

a ( color: #dfc11f; )

The asterisk means that the value you are looking for must be somewhere in the attribute (any part of the href attribute). This way, links from https://www..stijit. will also be selected. The gold color will be applied to all selected links.

    Which browsers are supported:
  • Chrome
  • Firefox
  • Safari
  • Opera

13) X

a ( background: url(path/to/external/icon.png) no-repeat; padding-left: 15px; )

Some sites have small arrow icons next to links to other sites to indicate that they are external links. The karat “^” is a symbol to indicate the beginning of a line. Thus, to select all tags whose href begins with http, you need to use a CSS selector with karat, as shown in the example above.

    Which browsers are supported:
  • Chrome
  • Firefox
  • Safari
  • Opera

14)X

a ( color: green; )

This uses a regular expression and the $ symbol to indicate the end of the line. In this example, we are looking for all links that refer to images with a .jpg extension.

    Which browsers are supported:
  • Chrome
  • Firefox
  • Safari
  • Opera

15)X

a ( color: green; )

Here we apply CSS custom attribute selector. We add our own data-filetype attribute to each link:

link

Now, using the above CSS selector, you can select all links leading to images with any extension.

    Which browsers are supported:
  • Chrome
  • Firefox
  • Safari
  • Opera

16)X

The tilde (~) allows you to highlight a specific attribute from a space-separated list of attributes. You can write our own data-info attribute, in which you can specify several keywords separated by a space. This way you can indicate that the link is external and leads to the image.

link

Using this technique, we can select elements with the combinations of attributes we need:

/* Select an element whose data-info attribute contains the value external */ a ( color: green; ) /* Select an element whose data-info attribute contains the value image */ a ( border: 2px dashed black; )

    Which browsers are supported:
  • Chrome
  • Firefox
  • Safari
  • Opera

17) X:checked

input:checked ( border: 3px outset black; )

This pseudo-class only highlights elements such as a checkbox or radio button, and only when they are already in the checked state.

    Which browsers are supported:
  • Chrome
  • Firefox
  • Safari
  • Opera

18) X:after

The :before and :after pseudo-classes are very useful - they create content before and after the selected element.

Clearfix:after ( content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; ) .clearfix ( *display: inline-block; _height: 1%; )

Here, using the pseudo-class:after, an empty line is created after the block with the class.clearfix, and then cleared. This approach is used if it is not possible to apply the overflow: hidden property.

    Which browsers are supported:
  • Chrome
  • Firefox
  • Safari
  • Opera

19) X:hover

div:hover ( background-color: rgba(11,77,130,0.5); )

Applies a specific style to an element when the mouse cursor hovers over it. Older versions of Internet Explorer only apply :hover to links.

A:hover ( border-bottom: 1px dotted blue; )

    Which browsers are supported:
  • IE6+ (Only applies to links in IE6)
  • Chrome
  • Firefox
  • Safari
  • Opera

20) X:not(selector)

div:not(#content) ( color: grey; )

Pseudo-class not (negations) This is useful when, for example, you need to select all divs except the one with id="content" .

Using the same principle, you can select all elements except p:

*:not(p) ( color: blue; )

    Which browsers are supported:
  • Chrome
  • Firefox
  • Safari
  • Opera

21) X::pseudoElement

p::first-line ( font-weight: bold; font-size: 24px; )

Pseudo-elements can be used to apply styles to portions of elements—for example, the first line of a paragraph or the first letter of a word. Applies only to block elements.

Selecting the first letter of a paragraph:

P::first-letter ( font-family: cursive; font-size: 30px; font-weight: bold; padding-right: 1px; )

Selecting the first line in a paragraph:

P:first-line ( font-size: 28px; font-weight: bold; )

    Which browsers are supported:
  • Chrome
  • Firefox
  • Safari
  • Opera

22) X:first-child

ul li:first-child ( border-top: none; )

Pseudo-class first-child selects only the first child of the parent element. Often used to remove a border from the first element of a list. This pseudo-class has been around since CSS 1.

    Which browsers are supported:
  • Chrome
  • Firefox
  • Safari
  • Opera 3.5+
  • Android

23) X:last-child

ul > li:last-child ( border-bottom: none; )

Pseudo-class last-child selects the last child of the parent element. He only appeared since CSS 3.

    Which browsers are supported:
  • IE9+ (IE8 supports first-child, but not last-child. Microsoft (c))
  • Chrome
  • Firefox
  • Safari
  • Opera 9.6+
  • Android

24) X:only-child

div p:only-child ( color: green; )

Pseudo-class only-child allows you to select those elements that are the only children of their parents.

    Which browsers are supported:
  • Chrome
  • Firefox
  • Safari 3.0+
  • Opera 9.6+
  • Android

25) X:nth-child(n)

li:nth-child(3) ( color: black; )

Selects the child element by the number specified in the parameter. nth-child selector takes an integer as a parameter, but counts from 1, i.e. if you need to select the second list item, use li:nth-child(2) . All pseudo-classes using nth-child appeared only starting with CSS 3.

    Which browsers are supported:
  • Chrome
  • Firefox 3.6+
  • Safari 3.1+
  • Opera 9.6+
  • Android 2.1+
  • iOS 2.0+

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

li:nth-last-child(2) ( color: red; )

If you have a large list of elements in ul and you need to select the third element from the end? Instead of writing li:nth-child(109) you can use last child selector nth-last-child. This method is the same as the previous one, but counting from the end.

    Which browsers are supported:
  • Chrome
  • Firefox 3.6+
  • Safari 3.1+
  • Opera 9.6+
  • Android 2.1+
  • iOS 2.0+

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

ul:nth-of-type(3) ( border: 1px dotted black; )

If there are four unordered lists on a page and you only need to style the third one, which does not have a unique id, you should use nth-of-type.

    Which browsers are supported:
  • Chrome
  • Firefox 3.6+
  • Safari 3.1+
  • Opera 9.6+
  • Android 2.1+
  • iOS 2.0+

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

ul:nth-last-of-type(3) ( border: 2px ridge blue; )

Pseudo-class nth-last-of-type(n) is intended to select the nth element of a certain type from the end.

    Which browsers are supported:
  • Chrome
  • Firefox 3.6+
  • Safari 3.1+
  • Opera 9.6+
  • Android 2.1+
  • iOS 2.0+

29) X:only-of-type

li:only-of-type ( font-weight: bold; )

Pseudo-class only-of-type selects elements that have no neighbors within the parent element. For example, you can select all uls that contain only lonely li.

    Which browsers are supported:
  • 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) ( font-style: italic; )

First-of-type pseudo-class selects the first element of the given type.

    Which browsers are supported:
  • Chrome
  • Firefox 3.5+
  • Safari 3.1+
  • Opera 9.5+
  • Android 2.1+
  • iOS 2.0+

Last update: 04/21/2016

Defining a style starts with a selector. For example:

Div( width:50px; /* width */ height:50px; /* height */ background-color:red; /* background color */ margin: 10px; /* indentation from other elements */ )

In this case, the selector is div . A number of selectors inherit the name of the formatted elements, for example, div, p, h2, etc. When such a selector is defined, its style will be applied to all elements matching this selector. That is, the above defined style will be applied to all elements

on the web page:

CSS selectors

CSS selectors

There are 3 divs on the page, and they will all be styled:

Classes

Sometimes the same elements require different styling. And in this case we can use classes.

To define a class selector in CSS, a dot is placed before the class name:

RedBlock( background-color:red; )

The class name can be arbitrary. For example, in this case the class name is "redBlock". However, it is allowed to use letters, numbers, hyphens and underscores in the class name, and the class name must begin with a letter.

It is also worth considering the case of names: the names "article" and "ARTICLE" will represent different classes.

Once a class is defined, we can apply it to an element using the class attribute. For example:

Let's define and use several classes:

CSS classes

CSS classes

Identifiers

To identify unique elements on a web page, identifiers are used, which are determined using id attributes. For example, a page might have a head block or header:

Defining styles for identifiers is similar to defining classes, only the hash symbol # is used instead of a dot:

CSS IDs

Main content

However, it is worth noting that identifiers have more to do with the structure of the web page and less with styling. Classes are used for styling rather than identifiers.

Universal selector

In addition to tag, class and identifier selectors, css also has the so-called universal selector, which represents the asterisk (*). It applies styles to all elements on the html page:

*( background-color: red; )

Styling a group of selectors

Sometimes certain styles are applied to a range of selectors. For example, let's say we want to apply an underline to all headings. In this case, we can list the selectors of all elements separated by commas:

CSS selectors

CSS3

Selectors

Selector group

Some text...

A selector group can contain both tag selectors and class and identifier selectors, for example:

H1, #header, .redBlock( color: red; )

In this article we will talk about CSS selectors. We will look at both old CSS selectors, which even IE6 supports, and completely new CSS3 selectors, which only support the latest versions of browsers. So, let's begin.

1.

* ( margin: 0; padding: 0; )

Let's start with the simplest things and then move on to more advanced things.

This CSS selector selects every element on the page. Many developers use it to reset the margin and padding values ​​of all elements. At first glance, this is convenient, but it’s still better not to do this in production code. This CSS selector is too heavy on the browser.

* can also be used to highlight child elements.

#container * ( border: 1px solid black; )

In this case, all child elements of #container are selected. Again, try not to overuse it.

Compatibility

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

2. #X

container (width: 960px; margin: auto; )

A hash sign before the CSS selector X will highlight the element with id = X. It's very simple, but be careful when using id.

Ask yourself: Do I absolutely need to highlight by id?

id values ​​lock the style tightly to the element and are not reusable. It would be preferable to use classes, tag names, or even pseudo-classes.

Compatibility

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

3.X

error ( color: red; )

This is a CSS selector of class X. The difference between id and class is that one class can own multiple elements on a page. Use classes when you want to apply a style to multiple elements of the same type. When using id, you will have to write a style for each individual element.

Compatibility

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Chrome

4. X Y

li a ( text-decoration: none; )

The CSS child element selector is the most common one. If you need to select elements of a certain type from many child elements, use this selector. For example, you need to select all the links that are in the li element. In this case, use this selector.

You should not make CSS selectors likeX Y Z A B.error. Always ask yourself whether it is necessary to write such a cumbersome CSS selector to highlight a given element.

Compatibility

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Chrome

5.X

a ( color: red; ) ul ( margin-left: 0; )

What if you want to cover all elements of a given type on a page? Keep it simple, use a CSS type selector. If you must select all unordered lists, use ul().

Compatibility

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera
a:link ( color: red; ) a:visted ( color: purple; )

We use the pseudo-class:link to highlight all links that have not yet been clicked.

If we need to apply a certain style to already visited links, then we use the pseudo-class: visited.

Compatibility

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

7. X+Y

ul + p ( color: red; )

Selects the next element. He will choose only an element of type Y that comes immediately after the X element. In the example, the text of the first paragraph after each ul will be red.

Compatibility

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Chrome

8. X>Y

div#container > ul ( border: 1px solid black; )

The difference between standard X Y and X > Y is that the CSS selector in question will only select immediate child elements. For example, consider the following code.

  • List item
    • Child element
  • List item
  • List item
  • List item

The CSS selector #container > ul will only select uls that are immediate children of divs with id = container . It will not select, for example, uls that are children of the first li s.

Therefore, you can get performance benefits by using this CSS selector. In fact, this is especially recommended when working with jQuery or other libraries that select elements based on CSS selector rules.

Compatibility

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

9. X ~ Y

ul ~ p ( color: red; )

This CSS selector is very similar to X+Y, however, it is less restrictive. Using ul + p will select only the first element after X. In this case, all p elements going to ul will be selected.

Compatibility

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

10.X

a(color:green;)

CSS selectors can also use attributes. For example, in this example we have selected all links that have the title attribute. Other links will remain unaffected.

Compatibility

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

11.X

a ( color: #ffde00; )

Please note that there are quotes. Don't forget to do the same in jQuery and other JavaScript libraries in which elements are selected using CSS selectors. Whenever possible, always use CSS3 CSS selectors.

A good rule, but too strict. What to do if the link does not lead directly to, but for example to? In these cases we can use regular expressions.

Compatibility

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Chrome

12.X

a (color: #1f6053; )

Compatibility

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

13.X

a ( background: url(path/to/external/icon.png) no-repeat; padding-left: 10px; )

Have you ever wondered how some websites can display a small icon next to external links? I'm sure you've seen them before, they're very memorable.

“^” is the most commonly used character in regular expressions. It is used to mark the beginning of a line. If we want to cover all tags whose href starts with http, we need to use the CSS selector above.

Please note that we are not looking for “http://”. This is not correct because addresses starting with https:// are not taken into account

What if we want to set a style only for links leading to a photo? Need to find end lines.

Compatibility

  • IE7+
  • Firefox
  • Safari
  • Opera

14.X

a(color:red;)

Again, we use the regular expression character “$” to indicate the end of the line. In this one, we are looking for links that refer to jpg files, or urls that have “.jpg” at the end.

Compatibility

  • IE7+
  • Firefox
  • Safari
  • Opera

15.X

a( color: red; )

How can we now write a CSS selector that will highlight links to all types of images? For example, we could write like this:

A, a, a, a ( color: red; )

But this is ineffective. Another possible solution is to use custom attributes. Why don't we add our own attribute data-filetype in every link?

Image link

A ( color: red; )

Compatibility

  • IE7+
  • Firefox
  • Safari
  • Opera

16.X

a ( color: red; ) a ( border: 1px solid black; )

Here's something special. Not everyone knows about this CSS selector. The tilde (~) allows you to highlight a specific attribute from a comma-separated list of attributes.

For example, we can set our own data-info attribute, which includes several keywords separated by spaces. So, we can indicate that the link is external and that it links to an image.

Click Me

Here, the Html code is in place, now let’s write the styles.

Not bad, right?

Compatibility

  • IE7+
  • Firefox
  • Safari
  • Opera

17. X:checked

input:checked ( border:1px solid black; )

This pseudo-class only highlights UI elements such as a radio button or a checkbox. Moreover, those that are marked/selected. Very simple.

Compatibility

  • IE9+
  • Firefox
  • Safari
  • Opera

18. X:after

The :before and :after pseudo-classes are very cool. It seems that every day there are new ways to use them effectively. They simply generate content around the selected element.

Many people became familiar with these pseudo-classes while working with the clear-fix hack.

Clearfix:after ( content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; ) .clearfix ( *display: inline-block; _height: 1%; )

This hack uses :after to add a space after an element and prevent it from wrapping.

According to the CSS3 specification, you must use two colons (::). However, you can use a single colon for compatibility.

Compatibility

  • IE8+
  • Firefox
  • Safari
  • Opera

19. X:hover

div:hover ( background: #e3e3e3; )

Want to apply a style to an element when you hover over it? Then this one CSS-selector for you.

Please be aware that older versions of Internet Explorer use: hover only for links.

This CSS-selector is often used to put border-bottom to links when they are hovered over with the mouse.

A:hover ( border-bottom: 1px solid black; )

border-bottom: 1px solid black; looks better than text-decoration: underline;

Compatibility

  • IE6+ (In IE6: hover must be applied to the link)
  • Firefox
  • Safari
  • Opera

20. X:not(selector)

div:not(#container) ( color: blue; )

The negation pseudo-class can be very useful. Let's say you need to select all divs except the one with id = container. The above code will handle this!

Or, if you need to select all elements except p.

*:not(p) ( color: green; )

Compatibility

  • IE9+
  • Firefox
  • Safari
  • Opera

21. X::pseudo element

We can use pseudo elements to style fragments of elements, such as the first line, or the first letter. Keep in mind that they must be applied to block-level elements in order to take effect.

A pseudo-element is specified by two colons: ::

Select the first letter in the paragraph

P::first-letter ( float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right:2px; )

This code will select all paragraphs, and in turn select the first letters in them and apply this style to them.

Select the first line in a paragraph

P::first-line ( font-weight: bold; font-size: 1.2em; )

Similarly, with ::first-line we style the first line in a paragraph.

“For compatibility with existing style sheets, the browser must understand the previous single-colon pseudo-element designations introduced in CSS 1, 2 ( :first-line, :first-letter, :before and:after). This compatibility is not allowed for new pseudo-elements introduced in this specification"

Compatibility

  • IE6+
  • Firefox
  • Safari
  • Opera

22. X:nth-child(n)

li:nth-child(3) ( color: red; )

Previously, we could not select, for example, the third child element? nth-child solves this!

note that nth-child takes an integer as a parameter, but does not start from 0. If you want to select the second list item, use li:nth-child(2) .

We can even select every fourth element of the list by simply writing (0)li:nth-child(4n)(/0).

Compatibility

  • IE9+
  • Firefox 3.5+
  • Safari

23. X:nth-last-child(n)

li:nth-last-child(2) ( color: red; )

What to do if you have a huge list of items in ul, and he needs to select the third element from the end? Instead of writing li:nth-child(397), you can use nth-last-child.

This method is almost identical to the one above, but starts from the end.

Compatibility

  • IE9+
  • Firefox 3.5+
  • Safari
  • Opera

24. X:nth-of-type(n)

ul:nth-of-type(3) ( border: 1px solid black; )

It happens that you need to select not a child element, but an element of a certain type.

Imagine there are five unordered lists on a page. . If you want to apply the style to the third one only ul, which does not have a unique id, need to use nth-of-type.

Compatibility

  • IE9+
  • Firefox 3.5+
  • Safari

25. X:nth-last-of-type(n)

ul:nth-last-of-type(3) ( border: 1px solid black; )

We can also use nth-last-of-type, counting elements from the end.

Compatibility

  • IE9+
  • Firefox 3.5+
  • Safari
  • Opera

26. X:first-child

ul li:first-child ( border-top: none; )

This pseudo-class selects the first child element. Often used to remove borders from the first and last element of a list.

Compatibility

  • IE7+
  • Firefox
  • Safari
  • Opera

27. X:last-child

ul > li:last-child ( color: green; )

In contrast :first-child:last-child selects the last child element.

Compatibility

  • IE9 + (Yes, yes, IE8 supports:first-child , but does not support:last-child. Hello Microsoft!)
  • Firefox
  • Safari
  • Opera

28. X:only-child

div p:only-child ( color: red; )

You don't see this pseudo-class very often, but it exists nonetheless.

It allows you to select elements that are the only children. For example, apply the above style to this html code:

One paragraph.

Two paragraphs

Two paragraphs

Only p of the first div will be selected because it is the only child element.

Compatibility

  • IE9+
  • Firefox
  • Safari
  • Opera

29. X:only-of-type

A very interesting pseudo-class. It affects elements that have no neighbors within the parent element. As an example, let's select a ul with only one element in the list.

The only solution is to use only-of-type .

Ul > li:only-of-type ( font-weight: bold; )

Compatibility

  • IE9+
  • Firefox 3.5+
  • Safari
  • Opera

30. X:first-of-type

first-of-type selects the first element of the given type.

To understand better, let's give

Paragraph

  • Paragraph 1
  • Point 2
  • Point 3
  • Point 4

Now try to understand how to highlight point 2.

Solution 1

Ul:first-of-type > li:nth-child(2) ( font-weight: bold; )

Solution 2

P + ul li:last-child ( font-weight: bold; )

Solution 3

Ul:first-of-type li:nth-last-child(1) ( font-weight: bold; )

Compatibility

  • IE9+
  • Firefox 3.5+
  • Safari
  • Opera
// echo get_the_post_thumbnail(get_the_ID(), "relatedthumbnail"); // display my thumbnail size?>

Let's talk about CSS selectors. In addition to the usual access to elements through the class name, id and the name of html tags, you can use special combinations and commands. Let's look at them in more detail in the article. Some selectors are supported by all browsers, some only by the newest versions of browsers.

1. * - selects all elements

* ( margin: 0; padding: 0; )

Let's start with simple selectors and then look at more complex ones. Many developers use it to reset the margin and padding values ​​of all elements. At first glance, this is convenient, but it’s still better not to do this in production code. This CSS selector is too heavy on the browser.

It can also be used to highlight all children of a particular container.

#container * ( border: 1px solid black; )

In this case, all child elements of the #container block are selected. Try not to abuse it.

Compatibility

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

2. #X

#container ( width: 960px; margin: auto; )

The hash sign in front of the CSS selector will highlight the element with id="container" . It's very simple, but be careful when using the id.

Ask yourself: Do I absolutely need to highlight by id?

id values ​​lock the style tightly to the element and are not reusable. It would be preferable to use class="" classes, tag names, or even pseudo-classes.

Compatibility

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

3.X

.error ( color: red; )

This is a CSS selector of class X. The difference between id and class is that one class can own multiple elements on a page. Use classes when you want to apply a style to multiple elements of the same type. When using id, you will have to write a style for each individual element.

Compatibility

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Chrome

4. XY

li a ( text-decoration: none; )

The CSS child element selector is the most common one. If you need to select elements of a certain type from many child elements, use this selector. For example, you need to highlight all the links that are in the li element. In this case, use this selector.

You should not make CSS selectors like X Y Z A B.error . Always ask yourself whether it is necessary to write such a cumbersome CSS selector to highlight a given element.

Compatibility

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Chrome

5.X

a ( color: red; ) ul ( margin-left: 0; )

What if you want to cover all elements of a given type on a page? Keep it simple, use a CSS type selector. If you must highlight all unordered lists, use ul()

Compatibility

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera
a:link ( color: red; ) a:visted ( color: purple; )

We use the pseudo-class:link to highlight all links that have not yet been clicked.

If we need to apply a certain style to already visited links, then we use the pseudo-class:visited.

Compatibility

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

7. X+Y

ul + p ( color: red; )

Selects the next element. He will choose only an element of type Y that comes immediately after the X element. In the example, the text of the first paragraph after each ul will be red.

Compatibility

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Chrome

8. X>Y

div#container > ul ( border: 1pxsolidblack; )

The difference between standard X Y and X > Y is that the CSS selector in question will only select immediate child elements. For example, consider the following code.

  • List item
    • Child element
  • List item
  • List item
  • List item

The CSS selector #container > ul will only select uls that are immediate children of the div with id =container . It will not select, for example, uls that are children of the first li s.

Therefore, you can get performance benefits by using this CSS selector. In fact, this is especially recommended when working with jQuery or other libraries that select elements based on CSS selector rules.

Compatibility

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

9. X~Y

ul ~ p ( color: red; )

This CSS selector is very similar to X+Y, however, it is less restrictive. Using ul + p will select only the first element after X. In this case, all p elements going to ul will be selected.

Compatibility

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

10. X

a(color:green;)

CSS selectors can also use attributes. For example, in this example we have selected all links that have the title attribute. Other links will remain unaffected.

Compatibility

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

11. X

a ( color: #ffde00; )

Please note that there are quotes. Don't forget to do the same in jQuery and other JavaScript libraries in which elements are selected using CSS selectors. Whenever possible, always use CSS3 CSS selectors.

A good rule, but too strict. What to do if the link does not lead directly to yandex.ru, but for example to http://yandex.ru/page1? In these cases we can use regular expressions.

Compatibility

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Chrome

12. X

a (color: #1f6053; )

This is what we need. A star indicates that the value you are looking for should appear somewhere in the attribute. So the CSS selector covers yandex.ru, http://yandex.ru/somepage etc.

Compatibility

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

13. X

a ( background: url(path/to/external/icon.png) no-repeat; padding-left: 10px; )

Have you ever wondered how some websites can display a small icon next to external links? I'm sure you've seen them before, they're very memorable.

"^" is the most commonly used character in regular expressions. It is used to mark the beginning of a line. If we want to cover all tags whose href starts with http, we need to use the CSS selector above.

Note that we are not looking for "http://". This is not correct because addresses starting with https:// are not taken into account

What if we want to set a style only for links leading to a photo? Need to find end lines.

Compatibility

  • IE7+
  • Firefox
  • Safari
  • Opera

14. X

a(color:red;)

Again, we use the regular expression character "$" to indicate the end of the line. In this one, we are looking for links that refer to jpg files, or urls that have “.jpg” at the end.

Compatibility

  • IE7+
  • Firefox
  • Safari
  • Opera

15. X

a( color: red; )

How can we now write a CSS selector that will highlight links to all types of images? For example, we could write like this:

A, a, a, a ( color: red; )

But this is hemorrhoids and ineffective. Another possible solution is to use custom attributes. Why don't we add our own data-filetype attribute to every link?

Image link

A ( color: red; )

Compatibility

  • IE7+
  • Firefox
  • Safari
  • Opera

16. X

a ( color: red; ) a ( border: 1pxsolidblack; )

Here's something special. Not everyone knows about this CSS selector. The tilde (~) allows you to highlight a specific attribute from a comma-separated list of attributes.

For example, we can set our own data-info attribute, which includes several keywords separated by spaces. So, we can indicate that the link is external and that it links to an image.

"Click Me

Here, the Html code is in place, now let’s write the styles.

Not bad, right?

Compatibility

  • IE7+
  • Firefox
  • Safari
  • Opera

17. X:checked

input:checked ( border:1pxsolidblack; )

This pseudo-class only highlights UI elements such as a radio button or a checkbox. Moreover, those that are marked/selected. Very simple.

Compatibility

  • IE9+
  • Firefox
  • Safari
  • Opera

18. X:after

The :before and :after pseudo-classes are very cool. It seems that every day there are new ways to use them effectively. They simply generate content around the selected element.

Many people became familiar with these pseudo-classes while working with the clear-fix hack.

Clearfix:after ( content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; ) .clearfix ( *display: inline-block; _height: 1%; )

This hack uses :after to add a space after an element and prevent it from wrapping.

According to the CSS3 specification, you must use two colons (::). However, you can use a single colon for compatibility.

Compatibility

  • IE8+
  • Firefox
  • Safari
  • Opera

19. X:hover

div:hover ( background: #e3e3e3; )

Want to apply a style to an element when you hover over it? Then this CSS selector is for you.

Keep in mind that older versions of Internet Explorer only apply :hover to links.

This CSS selector is often used to put a border-bottom on links when they are hovered over.

A:hover ( border-bottom: 1pxsolidblack; )

border-bottom: 1px solid black; looks better than text-decoration: underline;

Compatibility

  • IE6+ (In IE6: hover must be applied to the link)
  • Firefox
  • Safari
  • Opera

20. X:not(selector)

div:not(#container) ( color: blue; )

The negation pseudo-class can be very useful. Let's say I want to select all divs except the one that has id = container . The above code will handle this!

Or if I wanted to select all elements except p.

*:not(p) ( color: green; )

Compatibility

  • IE9+
  • Firefox
  • Safari
  • Opera

21. X::pseudoelement

We can use pseudo elements to style fragments of elements, such as the first line, or the first letter. Keep in mind that they must be applied to block-level elements in order to take effect.

A pseudo-element is specified by two colons: ::

Select the first letter in the paragraph

P::first-letter ( float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right:2px; )

This code will select all paragraphs, and in turn select the first letters in them and apply this style to them.

Select the first line in a paragraph

P::first-line ( font-weight: bold; font-size: 1.2em; )

Similarly, with ::first-line we style the first line in a paragraph.

“For compatibility with existing style sheets, the browser must understand the previous single-colon pseudo-element designations introduced in CSS 1, 2 (:first-line, :first-letter, :before and:after). This compatibility is not allowed for new pseudo-elements introduced in this specification"

Compatibility

  • IE6+
  • Firefox
  • Safari
  • Opera

22. X:nth-child(n)

li:nth-child(3) ( color: red; )

Previously, we could not select, for example, the third child element? nth-child solves this!

Note that nth-child takes an integer as a parameter, but does not start from 0. If you want to select the second list item, use li:nth-child(2) .

We can even select every fourth element of the list by simply writing (0)li:nth-child(4n)(/0).

Compatibility

  • IE9+
  • Firefox 3.5+
  • Safari

23. X:nth-last-child(n)

li:nth-last-child(2) ( color: red; )

What if you have a huge list of elements in ul and you need to select the third element from the end? Instead of writing li:nth-child(397), you can use nth-last-child.

This method is almost identical to the one above, but starts from the end.

Compatibility

  • IE9+
  • Firefox 3.5+
  • Safari
  • Opera

24. X:nth-of-type(n)

ul:nth-of-type(3) ( border: 1pxsolidblack; )

It happens that you need to select not a child element, but an element of a certain type.

Imagine there are five unordered lists on a page. . If you want to style only the third ul that doesn't have a unique id, you need to use nth-of-type.

Compatibility

  • IE9+
  • Firefox 3.5+
  • Safari

25. X:nth-last-of-type(n)

ul:nth-last-of-type(3) ( border: 1pxsolidblack; )

We can also use nth-last-of-type, counting elements from the end.

Compatibility

  • IE9+
  • Firefox 3.5+
  • Safari
  • Opera

26. X:first-child

ul li:first-child ( border-top: none; )

This pseudo-class selects the first child element. Often used to remove borders from the first and last element of a list.

Compatibility

  • IE7+
  • Firefox
  • Safari
  • Opera

27. X:last-child

ul > li:last-child ( color: green; )

In contrast, :first-child:last-child selects the last child element.

Compatibility

  • IE9 + (Yes, yes, IE8 supports:first-child , but does not support:last-child . Hello Microsoft!)
  • Firefox
  • Safari
  • Opera

28. X:only-child

div p:only-child ( color: red; )

You don't see this pseudo-class very often, but it exists nonetheless.

It allows you to select elements that are the only children. For example, apply the above style to this html code:

One paragraph.

Two paragraphs

Two paragraphs

Only p of the first div will be selected because it is the only child element.

Compatibility

  • IE9+
  • Firefox
  • Safari
  • Opera

29. X:only-of-type

A very interesting pseudo-class. It affects elements that have no neighbors within the parent element. As an example, let's select a ul with only one element in the list.

The only solution is to use only-of-type .

Ul > li:only-of-type ( font-weight: bold; )

Compatibility

  • IE9+
  • Firefox 3.5+
  • Safari
  • Opera

30. X:first-of-type

first-of-type selects the first element of the given type. To understand better, let's look at an example.

Paragraph

  • Paragraph 1
  • Point 2
  • Point 3
  • Point 4

Now try to understand how to highlight point 2.

Solution 1

Ul:first-of-type > li:nth-child(2) ( font-weight: bold; )

Solution 2

P + ul li:last-child ( font-weight: bold; )

Solution 3

Ul:first-of-type li:nth-last-child(1) ( font-weight: bold; )

Compatibility

  • IE9+
  • Firefox 3.5+
  • Safari
  • Opera

Description

Related selectors are similar in behavior to adjacent selectors (notation of the form E + F), but unlike them, style rules apply to all nearby elements. For example, for the selector h1~p the style will be applied to all elements

Located after the title

. Wherein

And

Must have a common parent, so if

Paste inside

, then the styles will no longer be applied.

Here the text color will be set to red for all paragraphs.

H1 ~ p ( color: red; )

Heading

Paragraph 1

Paragraph 2

Here the text color will be set to red for the first and third paragraphs. The second paragraph is not styled because

And

They do not have a common parent.

H1 ~ p ( color: red; )

Heading

Paragraph 1

Paragraph 2

Paragraph 3

Syntax

E ~ F (Description of style rules)

The tilde character (~) is used to control the style of sibling elements and is added between the two selectors E and F. Spaces around the tilde are optional. This style is applied to element F if it has the same parent as element E and immediately follows it.

HTML5 CSS3 IE Cr Op Sa Fx

Selectors

In this example, all images are initially hidden, but are displayed if you check the form field.