Home
Settings 
CSS Selectors. Types of selectors. CSS selectors and their types Types of selectors and their purpose

CSS Selectors. Types of selectors. CSS selectors and their types Types of selectors and their purpose

There are seven types of selectors in total. This:

  • Tag selector
  • Class selector
  • ID selector
  • Universal selector
  • Attribute selector
  • Pseudo-class selector
  • Pseudo element selector

The simplest one is written as the tag name without angle brackets. For example, div.

With this entry we say that the entire contents of all tags

of our document or documents will be written in red font.

If we need to give one paragraph some, say, background. Then we can use a class selector. But before writing the rules, we need in the tag

Write the attribute of this paragraph class, in the meaning of which you can write anything you want (in addition to Latin letters, you can use a hyphen and numbers), but you need to give a name to our selector so that later it is clear what it refers to. Then in the style sheet, or in the tag of our document between we write a dot, and after it the attribute value class, and in curly braces we set the rules for this paragraph.
If in the document:

That
in the style sheet:

Pravilo (
…
}

At the same time, different document elements can have the same class attribute values. That is, we can assign several tags to the same class and their content will be formalized in some way. This allows us to create a universal rule, for example, to highlight important parts of text, and simply add an attribute in the document class in tags.

The first thing worth mentioning is that the value of the id attribute in HTML is unique. Unlike class, we cannot assign it to any tag, but only to one! In the style sheet it is depicted as a hash sign, and in the document you need to add an id attribute with some value to the tag.
If in the document:

That
in the style sheet:
#pravilo(
…
}

The universal selector is written as an asterisk. If you set rules for this selector in the table, then this rule will apply to the content of all tags.
*{
…
}

All four of these selector types work in all browsers today. But there are selectors that do not work everywhere, for example, in Internet Explorer versions 7.6 and below.

They are written like this:

{
…
}

With this entry we say that everything contained in tags that have the attribute title, will have the form that is written in curly brackets. Moreover, it does not matter at all whether this attribute has any meaning. It can be empty and written like this:

Anyway to the tag

The rules that are written in the selector will be applied.
If you want rules to be applied to an attribute (for example, title) with a certain value, then you should write it like this:

{
…
}

If you want rules to be applied to the content of a specific tag with some attribute (for example, title), having a certain meaning, then it should be written like this:

p(
…
}

If we want the rules to be applied to the content of tags with the attribute title(or some other), the meaning of which contains some whole word, then you need to write it like this:

{
…
}

title(or another), in the meaning of which there is not a whole word, but simply some piece of text (for example, the word Caspian contains Caspian). Then you need to write it like this:

{
…
}

If we want the rules to be applied to the content of a tag that has the attribute title(or another), the meaning of which begins with some symbols (letters). Then you need to write it like this:

{
…
}

If we want the rules to be applied to the content of a tag that has the attribute title(or another), the meaning of which ends with some symbols (letters). Then you need to write it like this:

{
…
}

Attribute selectors are a very powerful tool that, unfortunately, are not so widely used today, “thanks” to Microsoft and its IE 6.7 and below. But, soon, when IE versions 6.7 and lower finally die out, these selectors will firmly become part of CSS and will be widely used.

Pseudo-class selectors are responsible for the appearance of the content of elements when it is in some state.
These selectors are:link, :visited, :active, :hover, :focus and :first-child. The first two relate only to links, i.e. to the contents of the tags , and the rest can be applied to any tag that has content.

:link formats user-touched links.

a:link (color:blue)

With this entry we are saying that all links in the document or documents not touched by the user will be colored blue.

a:visited (color:red;)

:active decorates the active element (at the moment of mouse click). Can be applied to any element, but in IE 6 only works for hyperlinks.

p:active (color:red)

With this entry we say that all paragraphs at the moment of clicking on them with the mouse will be colored red (letters).

:hover – decorates an element when the user hovers over it with the mouse. Can also be applied to any element, but in IE 6 only works for hyperlinks.

p:focus (color:red;)

When you press Tab, the text in the elements will be red

:first-child – sets rules for the first “children” of all elements. Doesn't work in IE 6.
We will talk more about what children and parents are in another article, but for now I’ll just say that a tag that is inside another tag is its “child”. For example, we have the code:

When viewed in a browser, the contents of the first tag

It will turn red.

There are only two pseudo-element selectors. These are: first-line and: first-letter
:first-line – first line (line)
:first-letter – first character
If we write:

p:first-line (color:blue), then

In all paragraphs of the document or documents, the first lines will be colored blue.

If we write:

p:first-letter (color:blue), then

in all paragraphs the first letters will be colored blue.
Both of these selectors do not work in IE 6.

That seems to be all about selectors; if you missed something or made a mistake somewhere, write in the comments to the material.

Well, for starters, I’ll say that the selector is used to uniquely identify an element in html document, to which we want to apply a particular CSS style.

Element selector

Up to this point, we have been working with this selector. That is. The name of the html element to which we wanted to apply this style was used as a selector. Those. Having written a class for example for paragraph (P), all paragraphs on the page acquired the style of this class.

P{
font-size: 12px
}

Now imagine a situation where you need to make the first paragraph in one style, the second in another, the third in a third, etc. Here it will come to our aid selector by class.

Selector by class

Let's look at how to create a generic class in CSS. And it’s very simple to do this: first we put a period, then immediately, without a space, we write the name of the class, and then the style in curly brackets. Well for example:

.green {
font-family: arial, verdana, sans-serif;
font-size: 12px; color:green;
}

How to apply this style?

Let's say we want to apply this style to a specific paragraph in the document. This is what it will look like in html:

class="green" > ... paragraph text...

As you can see, the attribute is used class with the meaning of the style name. It's clear? Here's another example for you:

This is a normal paragraph, it uses an element selector


Class ="green "> This paragraph is green because a class has been applied to it


Class="big_red" > And this paragraph is in larger font and red


This paragraph is again normal, by element selector class

p {
font-family:arial,verdana,sans-serif;
font-size:18px;
}
.green(color:green;)
.big_red{
font-size:28px;
color:red;
}

We first specify the base style for all paragraphs (selector by element), and then, if we want to change something in any paragraph, create a special style for it (selector by class) and assign it to this paragraph. When we create this very special class, we must write there only those properties that we want to add or change in relation to the base style for this element.

The classes from the example above can be applied not only to a paragraph, but also, for example, to headings, or for example to a table cell, or to the entire table; in short, they can be applied wherever they can affect something (in this case, wherever There is a color and text option).

You can make the class act only on a specific element (for example, a paragraph) by specifying the name of the element before the dot:

P.green(color:green;)

Now the green class will not act on anything other than the P element.

Top

Selector by id

This selector is used if you need to select one single element that is unique and different from all others in the document. For example, let's highlight the first heading on the page in a certain way:

html part:

<Н1 id="firstheader" > First heading on page

css - part:

H1#firstheader { color:red; font-weight: bold; text-align: center }

As you can see, in the html part, instead of the class attribute, the id attribute is used, and in the css, instead of a dot, the # sign is used.

In principle, the same can be done using a class selector, depending on how you like it :)

Top

Context selector

This is a very useful thing. Let's say we have a page with tables and paragraphs of text, and both in the table and in the paragraphs there are words in bold (strong). And so, we suddenly needed to make the words in the paragraph that are highlighted in bold become green. So here it is.

Vlad Merzhevich

An identifier (also called an "ID selector") defines a unique name for an element, which is used to change its style and refer to it through scripts.

The syntax for using an identifier is as follows.

Universal selector

Vlad Merzhevich

Sometimes you need to set one style for all elements of a web page at the same time, for example, set a font or text style. In this case, a universal selector that matches any element of the web page will help.

The asterisk symbol (*) is used to denote a universal selector, and in general the syntax is as follows.

* (Description of style rules)

Attribute selectors

Vlad Merzhevich

Many tags vary in their effect depending on what attributes they use. For example, tag can create a button, text field, and other form elements just by changing the value of the type attribute. However, adding style rules to the INPUT selector will apply the style simultaneously to all elements created using this tag. To flexibly control the style of such elements, attribute selectors have been introduced into CSS.

Child selectors

Vlad Merzhevich

A child element is an element that is directly located inside a parent element. To better understand the relationships between document elements, let's look at a little code (example 12.1).

Example 12.1. Nesting of elements in a document

HTML5 CSS 2.1 IE Cr Op Sa Fx

Adjacent selectors

Vlad Merzhevich

Elements of a web page are called adjacent when they immediately follow each other in the document code. Let's look at a few examples of element relationships.

Lorem ipsum dolor sit amet.

In this example the tag is a child of the tag

Because it is inside this container. Respectively

Acts as a parent .

Context selectors

Vlad Merzhevich

When creating a web page, you often have to nest some tags inside others. To ensure that styles for these tags are used correctly, selectors that work only in a certain context will help. For example, set the style for the tag only when it is located inside a container

This way you can simultaneously set the style for an individual tag, as well as for a tag that is inside another one.

The selector is used to uniquely identify the element in the HTML document to which we want to apply a particular CSS style.

  • Selector by element;
  • Selector by class;
  • Selector by id;
  • Context selector;

Element selector

Up to this point, we have been working with this selector. That is. The name of the html element to which we wanted to apply this style was used as a selector. Those. Having written a class for example for paragraph (P), all paragraphs on the page acquired the style of this class.

P(
font-size: 12px
}

Now imagine a situation where you need to make the first paragraph in one style, the second in another, the third in a third, etc. Here it will come to our aid selector by class.

Selector by class

Let's look at how to create a generic class in CSS. And it’s very simple to do this: first we put a period, then immediately, without a space, we write the name of the class, and then the style in curly braces. For example:

.green(
font-family: arial, verdana, sans-serif;
font-size: 12px; color:green;
}

How to apply this style?

Let's say we want to apply this style to a specific paragraph in the document. This is what it will look like in html:

Paragraph text...

As you can see, the attribute is used class with the meaning of the style name.

EXAMPLE:

This is a normal paragraph, it uses an element selector


This paragraph is green because a class has been applied to it


And this paragraph is in larger font and red


This paragraph is again normal, by element selector class

p(
font-family:arial,verdana,sans-serif;
font-size:18px;
}
.green (color:green;)
.big_red(
font-size:28px;
color:red;
}

We first specify the base style for all paragraphs (selector by element), and then, if we want to change something in any paragraph, create a special style for it (selector by class) and assign it to this paragraph. When we create this very special class, we must write there only those properties that we want to add or change in relation to the base style for this element.

The classes from the example above can be applied not only to a paragraph, but also, for example, to headings, or, for example, to a table cell, or to the entire table; in short, they can be applied wherever they can affect something (in this case wherever there is a color and text parameter).

You can make the class act only on a specific element (for example, a paragraph) by specifying the name of the element before the dot:

P.green (color:green;)

Now the green class will not act on anything other than the P element.

Selector by id

This selector is used if you need to select one single element, unique, different from all others in the document. For example, let's highlight the first heading on the page in a certain way:

html part:

<Н1 id="firstheader">First heading on page

css - part:

H1#firstheader ( color: red; font-weight: bold; text-align: center )

As you can see, in the html part, instead of the class attribute, the id attribute is used, and in the css, instead of a dot, the # sign is used.

In principle, the same can be done using a selector by class J

Context selector

This is a very useful thing. Let's say we have a page with tables and paragraphs of text, and both in the table and in the paragraphs there are words in bold. It is necessary to make sure that the words in the paragraph that are highlighted in bold become green. So here it is:

p strong (color:green)

Those. at the beginning P then a space, then STRONG, and only then the style. This line reads something like this: If inside the element P there is an element STRONG then assign a green style to the strong element.

Nesting can be of any level. Here’s another example: “If suddenly inside a table cell ( td) , paragraph ( P) , inside which there will be a word highlighted in bold ( STRONG), then let this word turn red! "

td p strong (color:red;)

The language for describing the appearance of a document, CSS, is constantly evolving. Over time, not only does its power and functionality increase, but also its flexibility and ease of use.

Let's start to figure it out. Open any CSS textbook; at least one section will be devoted to types of selectors. This is not surprising, since they are one of the most convenient ways page content management. With their help you can interact with absolutely anyone HTML elements. There are currently 7 types of selectors:

  • for tags;
  • for classes;
  • for ID;
  • universal;
  • attributes;
  • to interact with pseudo-classes;
  • to manage pseudo-elements.

The syntax is simple. To learn how to use it, just read about them. Which option is better to choose for content control in your case? Let's try to figure it out.

Tag selectors

This is the simplest option that does not require special knowledge to record. To manage tags, you need to use their name. Let's assume that the header of your site is wrapped in a tag

. To control it in CSS you need to use the header() selector.

Advantages: ease of use, versatility.

Disadvantages - complete lack of flexibility. In the above example, all header tags will be selected at once. But what if you only need to manage one?

Class selectors

The most common option. Designed to manage tags with a class attribute. Let's say you have three blocks in your code

, each of which needs to be given a specific color. How to do this? Standard CSS selectors by tags are not suitable; they indicate parameters for all blocks at once. The solution is simple. Assign a class to the elements. For example, the first div received class=’red’, the second - class=’blue’, the third - class=’green’. Now they can be selected using CSS tables.

The syntax is as follows: we indicate a period (“.”), after which we write the name of the class. To control the first block, we use the .red construct. The second is .blue and so on.

Important! It is recommended to use clear values ​​for the class attribute. It is considered bad form to use a translit (for example, krasiviy-blok) or random combinations of letters/numbers (ojfh834871). You will definitely get confused in such code, not to mention the difficulties that those who will work on the project after you will have to face. The best option is to use some methodology, like BEM.

Advantages: quite high flexibility.

Disadvantages - several elements can have the same class, which means they will be edited at the same time. The problem is solved by using the methodology, as well as inheriting preprocessors. Be sure to master less, sass or some other preprocessor, they will greatly simplify your work.

Selector by ID

The opinions of layout designers and programmers regarding this option are ambiguous. Some textbooksCSSnot recommended to use at allID,since if used carelessly they can cause problems with inheritance. However, many experts actively place them throughout the markings. It's up to you to decide. The syntax is: hash symbol ("# "), then the block name. For example,#red.

IDdiffers from the class in several ways. Firstly, there cannot be two identical ones on a page.ID.They are assigned unique names. Secondly, such a selector has a higher priority. This means that if you give a block a classredand indicate in the tablesCSSred and then assign it to himid blueand specify a blue color, the block will turn blue.

Advantages - you can control a specific element without paying attention to styles for tags and classes.

Disadvantages - easy to get confused in a large numberIDAndclass.

Important! If you use the BEM methodology (or its analogues),IDIn general, you don't need it. This layout technique involves the use of unique classes, which is much more convenient.

Universal selector

Syntax: asterisk (“*”) and curly braces, i.e. *{}.

Used to assign certain attributes to all page elements at once. When might this come in handy? For example, if you want to set the page propertybox-sizing: border-box.Can be used not only to control all components of a document, but also to control all child elements of a particular block, e.g.div *().

Advantages - you can manage a large number of elements simultaneously.

Disadvantages - not flexible enough. Additionally, using this selector can slow down the page in some cases.

By attributes

Allows you to manage an element with a specific attribute. For example, you have several input tags with different type attribute. One of them is text, the second is password, the third is number. Of course, you can assign classes or IDs to each, but this is not always convenient. CSS attribute selectors make it possible to specify values ​​for specific tags with maximum precision. For example, like this:

input()

This attribute selector will select all inputs with type text.

The tool is quite flexible; it can be used with any tags that may have attributes. But that's not all! The CSS specification makes it possible to manipulate elements even more conveniently!

Let's imagine that your page has an input with the attribute placeholder = “Enter a name” and input placeholder = “Enter a password.” They can also be selected using the selector! The following construction is used for this:

input() or input

More flexible work with attributes is possible. Let's say you have several tags with similar title attributes (say, “Caspian” and “Caspian”). To select both, use the following selectors:

CSS will select all elements whose title contains the characters “Kaspiysk”, i.e. both “Kaspiyskiy” and “Kaspiyskaya”.

You can also select tags whose attributes begin with certain characters:

or end with them:

{}.

Advantages - maximum flexibility. You can select any existing page elements without fiddling with classes.

Disadvantages - it is used relatively rarely, only in specific cases. Many layout designers prefer methodologies, since specifying a class can be easier than arranging numerous and equal signs. Additionally, these selectors do not work on the Internet Explorer versions 7 and below. However, who needs old Internet Explorer now?

Pseudo-class selectors

A pseudo-class denotes the state of an element. For example, :hover is what happens to part of the page when the cursor is hovered, :visited is the visited link. This also includes elements like:first-child and:last-child.

This type of selector is actively used in modern layout, since thanks to it you can make the page “live” without JavaScript applications. For example, you want to make sure that when you hover over a button with the btn class, its color changes. To do this we use the following construction:

btn:hover (

Background-color: red;

For beauty, you can specify the transition property in the main properties of this button, for example, in 0.5s - in this case, the button will not turn red instantly, but for half a second.

Advantages - they are actively used to “revive” pages. Easy to use.

Disadvantages - there are none. This is a really convenient tool. However, inexperienced layout designers may get confused by the abundance of pseudo-classes. The problem is solved by study and practice.

Pseudo element selectors

"Pseudo elements" are those parts of the page that are not present in HTML, but can still be manipulated. Don't understand anything? Everything is simpler than it seems. For example, you want to make the first letter in a line large and red, but leave the rest of the text small and black. Of course, you can enclose this letter in a span with a specific class, but this is long and boring. It's much easier to select the entire paragraph and use the pseudo-element::first-letter. It allows you to control the appearance of the first letter.

There is quite large number pseudo-elements. It is unlikely that it will be possible to list them in one article. You can find relevant information in your favorite search engine.

Advantages - allow flexible customization appearance pages.

Disadvantages - beginners often get confused about them. Many selectors of this type only work in certain browsers.

Let's sum it up

Selector - powerful tool document flow control. Thanks to it, you can select absolutely every component of the page (even those that exist only conditionally). Be sure to learn all your options or at least write them down. This is especially important if you create complex pages with modern designs and a lot of interactive elements.

Settings 

You may also like