This page has been robot translated, sorry for typos if any. Original content here.

CSS selectors for every day

CSS-селекторы, нужные на каждый день

So, the selector is a formal description of the element or group of elements to which the indicated style rule applies. A simple selector is a type selector, a class selector, or an id selector, which can be followed by pseudo-class selectors and attribute selectors (the latter in this brief description are silent). A selector is a sequence of simple selectors, separated by spaces or the characters ">" and "+" . These separators have practical meaning when creating websites and are designed for convenience.

Despite the fact that many of the selectors mentioned here are included in the CSS3 specification and, accordingly, are supported only by modern browsers, you should still familiarize yourself with them and keep them in memory, as they are very practical and convenient.

CSS-селекторы, нужные на каждый день

Kinds of selectors

Tag selector , the selector is the name of the tag for which you want to change properties.

Universal selector , which is denoted by the * symbol and is used to change the necessary properties of all elements on the page.

Classes are applied to elements with a class attribute and a required value.

Identifiers are used for elements with the id attribute and the required value. The main difference between classes and identifiers is that the second names must be unique, not repeated, which allows them to be used with scripts (JavaScript).

Pseudo-classes are designed to change the style of existing page elements depending on their dynamic state, for example, when working with links ( : link ,: visited ,: hover,: active ,: focus ). Pseudo-elements define the style of elements that are not clearly defined in the document structure ( : first-letter,: first-line ), and also allow you to generate and stylize non-existent content ( : before ,: after and the content property). In CSS3, pseudo-elements start with two colons :: ( :: :: first-letter , :: first-line , :: before , :: after ).

Attribute selectors . They allow to stylize an element not only by the tag value, but also by the attribute value (a [attr]).

Context selectors . Styling elements inside another element (ab).

Child selectors . Stylization of an element located immediately after another element and being its direct descendant (a> b).

Neighbor selectors . Designed to stylize neighboring elements that have a common parent. (a + b)

Related selectors . They are similar with neighboring selectors, but with the difference that all neighboring elements are stylized, and not just the first neighboring element. First appeared in CSS3. (a ~ b).

So let's get started!

*

  * {
  margin: 0;
  padding: 0;
  }
 

Let's start with the simplest things for newbies, before moving on to advanced selectors.

The star symbol allows you to select all the items on the page. Many web developers use this to "reset" all external and internal indents.

You can also use the * symbol for the children of an object.

  #container * {
  border: 1px solid black;
  }
 

This code targets all elements that are children of the block with the identifier container.

Compatibility:
Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

#X

  #container {
  width: 960px;
  margin: auto;
  }
 

The lattice character allows us to select items by id. This is one of the most common ways to select items, but be careful when using it.

"Ask yourself: Do I really need to use an id for an element to refer to it?"

The id selectors are inflexible and difficult to reuse in different projects. If possible, try using the tag name or even the pseudo-class first.

Compatibility:
Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

.X

  .error {
  color: red;
  }
 

This is a class selector. The difference between id and classes is that with the help of classes you can select several elements at once. Use classes if you need to apply one style to a group of elements.

Otherwise, use id to find the "needles in a haystack" and apply the style to only one specific object.

Compatibility:
Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

Xy

  li a {
  text-decoration: none;
  }
 

The next most frequently used type of selector is the child selector. It should be used when it is necessary to make a more precise selection of elements.

For example, what if you need to select not all link tags, but only those that are inside an unordered list? This is the case when you should use a child selector.

"Tip: If your selector looks like XYZA B.error, then you probably do something like that. Always ask yourself if this is the easiest way"
Compatibility:
Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X

  a {color: red;}
  ul {margin-left: 0px;}
 

What if you want to link to all elements of a particular type on a page, if they do not have id or classes? Make it easier, use type selectors. If you need to select all unordered lists, use ul {}.

Compatibility:
Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X: visited and X: link

  a: link {color: red;}
  a: visited {color: purple;}
 

Here we use the pseudo-class: link to select all links that have not yet been clicked.

There is also a pseudo-class: “visited”, which, as you expected, allows us to apply the style only to those links that were clicked or clicked.

Compatibility:
Internet Explorer Chrome Opera Safari Firefox Android iOS
7.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X + Y

  ul + p {
  color: red;
  }
 

This is the so-called adjacent selector. In this case, each paragraph following immediately after each ul element will be red.

Compatibility:
Internet Explorer Chrome Opera Safari Firefox Android iOS
7.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X> Y

  #container> ul {
  border: 1px solid black;
  }
 

The difference between XY and X> Y is that the latter will choose only direct descendants. Consider the following example:

  <div id = "container">
  <ul>
  <li> List item
  <ul>
  <li> Child </ li>
  </ ul>
  </ li>
  <li> List item </ li>
  <li> List item </ li>
  <li> List item </ li>
  </ ul>
  </ div>
 

The selector #container> ul will only select those ul elements that are direct descendants of the div block with the identifier container . Those. in this case, this selector will not select the ul element, which is a descendant of the first li element.

Compatibility:
Internet Explorer Chrome Opera Safari Firefox Android iOS
7.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X ~ Y

  ul ~ p {
  color: red;
  }
 

This combination of sister (sibling) elements is similar to X + Y , but it is less strict. If, in the case of ul + p , only the first elements of p that follow ul are selected (that is, adjacency is observed in the selection), then the selector we are now considering is more general.

In our case, it will select all the p elements following the ul element.

Compatibility:
Internet Explorer Chrome Opera Safari Firefox Android iOS
7.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X [title]

  a [title] {
  color: green;
  }
 

Here we refer to the selector attribute. In our example, only links with the title attribute will be colored in green.

Compatibility:
Internet Explorer Chrome Opera Safari Firefox Android iOS
7.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X [href = "foo"]

  a [href = "http://www.codeharmony.ru"] {
  color: red;
  }
 

The code above will make it possible to style all links whose href attribute is http://www.codeharmony.ru. These links will be red. The remaining links will not receive this style.

It works well, but it is a bit inflexible. What if the link actually leads to Codeharmony.ru but perhaps the address is listed as codeharmony.ru and not http://www.codeharmony.ru? In such cases, we can use regular expression basics.

Compatibility:
Internet Explorer Chrome Opera Safari Firefox Android iOS
7.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X [href * = "codeharmony"]

  a [href * = "codeharmony"] {
  color: red;
  }
 

Let's go further; this is exactly what we need. An asterisk indicates that the value you are looking for can be in any part of the href attribute. Thus, we can select both http://www.codeharmony.ru and www.codeharmony.ru and codeharmony.ru.

Compatibility:
Internet Explorer Chrome Opera Safari Firefox Android iOS
7.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X [href ^ = "http"]

  a [href ^ = "http"] {
  background: url (path / to / external / icon.png) no-repeat;
  padding-left: 10px;
  }
 

Have you ever thought about how on some sites next to links that lead to other sites (external to the current one) there are small icons that let the user know about it? These are excellent “reminders” for the user that the link leads to another site.

This is done with the help of the symbol ^ (carat) . It is usually used in regular expressions to denote the beginning of a line. If we want to select links that have the href attribute starting with http, then we can use the selector from the example above.

"Please note that we are not looking for http: //. This is optional and, moreover, does not include links using the https: // protocol."
Compatibility:
Internet Explorer Chrome Opera Safari Firefox Android iOS
7.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X [href $ = ". Jpg"]

  a [href $ = ". jpg"] {
  color: red;
  }
 

Again, we use a regular expression and a $ symbol to mark the end of a line. In this example, we are looking for all links that refer to images with the extension .jpg . Of course, this approach will not work for images with extensions .gif , .png , etc.

Compatibility:
Internet Explorer Chrome Opera Safari Firefox Android iOS
7.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X [data - * = "foo"]

  a [data-filetype = "image"] {
  color: red;
  }
 

How can we cover different types of pictures? We can create, for example, several selectors:

  a [href $ = ". jpg"],
  a [href $ = ". jpeg"],
  a [href $ = ". png"],
  a [href $ = ". gif"] {
  color: red;
  }
 

But it is a chore and not elegant. Another option is to create your own data-filetype attribute and add it to each link leading to the image.

  <a href="path/to/image.jpg" data-filetype="image"> Link </a> 

By doing this, we can use the code for this example:

  a [data-filetype = "image"] {
  color: red;
  }
 
Compatibility:
Internet Explorer Chrome Opera Safari Firefox Android iOS
7.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X [foo ~ = "bar"]

  a [data-info ~ = "external"] {
  color: red;
  }

  a [data-info ~ = "image"] {
  border: 1px solid black;
  }
 

Here is another interesting trick that not everyone knows. The ~ (tilde) sign allows us to select attributes with values ​​separated by spaces, i.e.

  <a href="path/to/image.jpg" data-info="external image"> Click here </a> 

Using this technique, we can make samples with the combinations we need:

  / * Select the data-info attribute that contains the external value * /
  a [data-info ~ = "external"] {
  color: red;
  }

  / * and select the data-info attribute that contains the image value * /
  a [data-info ~ = "image"] {
  border: 1px solid black;
  }
 
Compatibility:
Internet Explorer Chrome Opera Safari Firefox Android iOS
7.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X: checked

  input [type = radio]: checked {
  border: 1px solid black;
  }
 

This pseudo-class selects those elements that have been marked, for example, radio button or checkbox.

Compatibility:
Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X: after

  .clearfix: after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
  font-size: 0;
  height: 0;
  }

  .clearfix {
  * display: inline-block;
  _height: 1%;
  }
 

This pseudo-class allows you to generate content around the selected element.

This example shows how using the pseudo-class : after after a block with the class .clearfix creates an empty string, and then clears it. Good method when it is impossible to apply overflow: hidden .

Compatibility:
Internet Explorer Chrome Opera Safari Firefox Android iOS
8.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X: hover

  div: hover {
  background: # e3e3e3;
  }
 

You know that for sure. The official name sounds like "pseudo-class based on user action." It sounds scary, although in reality everything is simple. Do you want to apply a certain style to an element when you hover over it? This is it!

"Remember that older versions of IE do not understand this pseudo-class in relation to anything but the tag a."

Often this technique is used to set the lower bound for links when you hover over them:

  a: hover {
  border-bottom: 1px solid black;
  }
 
"Mega-cheat: border-bottom: 1px solid black; looks better than text-decoration: underline;"
Compatibility:
Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ (in IE6 only works with links) 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X: not (selector)

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

Denial can also be very helpful. Suppose I want to select all divs except one with the identifier container . For this, a negative code (not equal) is perfect.

If I need to select all elements except paragraph tags, then I can write this:

  *: not (p) {
  color: green;
  }
 
Compatibility:
Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X :: pseudoElement

  p :: first-line {
  font-weight: bold;
  font-size: 1.2em;
  }
 

Pseudo-elements can be used to style an element's fragment, for example, the first line or the first letter. Applies to block elements only.

Select the first letter of the paragraph:

  p :: first-letter {
  float: left;
  font-size: 2em;
  font-weight: bold;
  font-family: cursive;
  padding-right: 2px;
  }
 

This piece of code will find all the paragraphs on the page and apply the specified styles to the first letter of each of them. This is often used to create a newspaper headline effect.

Select the first line of the paragraph:

  p :: first-line {
  font-weight: bold;
  font-size: 1.2em;
  }
 

Similar to the previous example, but in this case the first line of each paragraph will be selected.

Compatibility:
Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X: nth-child (n)

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

Remember the times when we had no opportunity to refer to a specific ordinal element descendant? This pseudo-class solves this problem!

An integer is taken as a parameter. If you need to select the 2nd element of the list, you need to use the construct: li: nth-child (2) .

We can even select descendant element groups. For example, to select every fourth element of the list, you need to use the construct: li: nth-child (4n) .

Compatibility:
Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X: nth-last-child (n)

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

What if you have a large unordered list and you need, for example, to select the third element from the end. Instead of writing li: nth-child (397) , you can use the pseudo-class nth-last-child .

Compatibility:
Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X: nth-of-type (n)

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

Sometimes there are situations when, instead of choosing certain descendants, you need to make a choice on the type of element.

Imagine that there are five unordered lists on the page. If you need to apply styles only to the third list, but it does not have a unique identifier and other “hooks”, then you can use the nth-of-type pseudo-class (n) . The code above shows a way to style only the third unordered list.

Compatibility:
Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1.0+ 1.0+ 1.0+ 1.0+ 1.0+

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

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

Yes, to complete the picture there is such an option. So you can select the n-th element of a certain type from the end.

Compatibility:
Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X: first-child

  ul li: first-child {
  border-top: none;
  }
 

This pseudo-class allows you to select only the first descendant of the parent element. Often used to remove the boundaries of the first and last list items.

For example, if you have a list of rows, each of which has a border-top and border-bottom , then the last and first elements of the list will be a little out of the general order.

To eliminate this disadvantage, you can use this pseudo-class.

Compatibility:
Internet Explorer Chrome Opera Safari Firefox Android iOS
7.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X: last-child

  ul> li: last-child {
  color: green;
  }
 

In contrast to the first-child class, last-child will select the last element of the parent element.

Compatibility:
Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X: only-child

  div p: only-child {
  color: red;
  }
 

Honestly, this is a rarely used pseudo-class, but, nevertheless, it is also useful. It allows you to choose those elements that are the only descendants for their parents.

In our example, the style will be applied only to the paragraph, which is the only descendant of the div block.

Let's look at this markup for clarity:

  <div> <p> Here is the only paragraph in the block. </ p> </ div>

  <div>
  <p> Here is the first paragraph in the block. </ p>
  <p> Here is the second paragraph in the block. </ p>
  </ div>
 

In this case, paragraphs in the second block div will not be selected. The style will be applied only to a paragraph from the first div .

Compatibility:
Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X: only-of-type

  li: only-of-type {
  font-weight: bold;
  }
 

This pseudo-class selects elements that do not have sister elements in their containing container. For example, let's select all ul that contain single li .

You could write ul li , but this method will select all li elements. The only way is to use the only-of-type .

  ul> li: only-of-type {
  font-weight: bold;
  }
 
Compatibility:
Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

X: first-of-type

This pseudo-class allows you to select the first sibling of the same type.

To better understand this, copy the following code into your editor:

  <div>
  <p> Here is a paragraph. </ p>
  <ul>
  <li> Element 1. </ li>
  <li> Element 2. </ li>
  </ ul>

  <ul>
  <li> Element 3. </ li>
  <li> Element 4. </ li>
  </ ul>
  </ div>
 

Now, without reading further, try to give style only to "element 2". When you guess (or surrender), read on.

Solution 1

There are many ways to solve this problem. Consider just a few of them. Let's start by using first-of-type :

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

This code says: "Find the first unordered list on the page, then find only its direct descendants that are li elements. After that, select only the second element li in order."

Solution 2

Another option is to use the adjacent selector :

  p + ul li: last-child {
  font-weight: bold;
  }
 

Here we find ul , immediately following the paragraph tag, after which we find its most recent child element.

Solution 3

You can play a little more with the selectors and do this:

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

Now we get the first ul element on the page, then look for the very first li element, but starting from the end.

Compatibility:
Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

Conclusion

If you are still writing code, taking into account the existence of IE6, then you need to be extremely careful when using new selectors. But do not make an excuse from this, do not say that you do not need to know this - by this you complicate life for yourself.

If you work with any JavaScript-libraries, for example, with jQuery, then always try to use "native" CSS3 selectors when it is possible. In this case, your code will work faster.

Memo CSS selectors

CSS selectors needed every day

Via codeharmony.ru