This material is devoted to the basics of styling on an Internet resource using selectors.

Selectors in CSS are used to define a specific
element in the html page for which you need to apply
or change the CSS style.

Types of selectors in CSS

Element selector

To give the necessary CSS style, in this case the name is written as a selector html element. For example, it is enough to specify the desired style for the H1 heading, after which these headings will take the form we require. This is what the code will look like:

H1 (
font-size: 11pt;
}

There are often times when you need to make headings in different styles. Here, a class selector will help solve this problem.

Selector by class

The class selector is universal in CSS. You can write it as follows: before the name of the class we write a dot, and only then in curly brackets we indicate the style we need:

.red (
font-family: tahoma, sans-serif;
color:red;
font-size: 11pt;
}

An example of using a class selector. Apply this style to the H1 heading in html page:

Page title

From the example above you can see that the "class" attribute with the given name is applied CSS style "red".
Another example. In the html part we write:

This header is blue because the corresponding class is applied to it

id".

In the html document it will look like this:

Let's set the style for this paragraph

In the CSS document:

p#newstyle ( color: blue; font-size: 12px;)

As a result, a blue font with a size of 12px will be used for this paragraph.

Context selector

An equally necessary component is context selector.
For example, on a website there was a need for “H1” headings, enclosed with the tag bold highlight in red:

H1 bold ( color:red ; )

As you can see, the H1 heading is written first, a space is added, the tag bold and then in brackets the style we specified. This can be expressed in words like this: “If there is a bold tag inside the H1 header, the text should be red.”

In this way, you can also set styles for items in bulleted lists, tables, and even their cells, with different levels of nesting.

Next page -

CSS selectors are one of the main features of the CSS language. Selectors allow you to access either a group of elements or just one of them.

Selectors in CSS

Selectors are used to tell the browser which elements to apply the styles described in curly braces.

P(Styles…)

In this case, the selector is p – paragraph tag. This rule will add styles to all paragraphs on a web page.

What are the types of CSS selectors?

Tag selector - the simplest. It has been demonstrated in an example. To write it in css, you need to write the tag name without angle brackets. The styles will be applied to all elements with that tag.
Table() – styles for all tables
Li() – styles for all list items
A() – styles for all links

Style class– you can attach a style class to any element on a web page. Even to one letter. Then in the css file you can access this element by writing your own styles for it. To do this, you need to put a dot and write the name of the style class after it. Examples:
.about() – the rules will apply to all elements that have the class = "about" attribute
.down() – the rules will be applied to all elements that have the class = "down" attribute
.float() – the rules will apply to all elements that have the attribute class = "float"

As you can see, the main thing is to make a point. A style class can be bound to an unlimited number of elements. An element can be assigned several classes.

Identifier– another type of selector. One identifier can be assigned to only one element. It cannot have two identifiers, and the id associated with this element cannot be registered anywhere else.

It is set like this:

Paragraph

That is, just like a class, only the attribute is used id any word is used as its meaning.

To access an element with an identifier via css, you need to write the id value and put a hash in front of it.

#first( Font-size: 22px )

We turned to the paragraph with id = first. The style will only be applied to it. For the remaining paragraphs, the font size will not change.

Pseudo-classes

There is one interesting type of selector in CSS: pseudo-classes. That is, classes that elements have by default and do not need to be specified additionally. Some of them only work for links, while some can be applied to all elements. In any case, CSS pseudo-classes greatly facilitate the work of a web developer.

A pseudo-class is a style class of an element that we didn’t actually define ourselves, it just exists on its own. For example, seeing this code in html:

Paragraph

You can absolutely tell that this paragraph has a special class, because it is written there. But pseudo-classes do not need to be written; elements have them by default, and this is their advantage in this case. Next, let's look at the most popular of them.

For links

For input fields and links

:focus – The style is applied to the element that receives input focus.
In fact, there are a lot of new cool pseudo-classes for input fields, but they are all new to CSS3, and in this article I would like to discuss only the simplest ones. There will definitely be an article about CSS3 selectors in the future.

For all elements

1. :hover – style applied when hovering over an element
2. :first-child – select the first child element
3. :last-child – last child element
4. :nth-child() – A number or formula is written in parentheses that determines which elements will be selected.
5. :first-of-type, :last-of-type, :nth-of-type() – work almost identically to the previous pseudo-classes. The only difference is that the element type is taken into account here. The difference can be felt in the following example:
   li:first-child – the first list item will be selected, but only if the li element comes first in the parent block. If there is another tag before it, nothing will be selected.
6. li:first-of-type – the first list item from all that is in the parent will be selected. It doesn't matter where they are located in the code. I hope the difference is clear.
7. :nth-last-child – works similar to :nth-child, but counts from the last element, not the first.
8. :nth-last-of-type – similar to :nth-last-child, but taking into account the element type.

These are not all pseudo-classes, but the most popular and necessary ones. Actually, all pseudo-classes are marked in the same way in css, separated by a colon. In addition, you can combine selectors and get interesting features:
a:visited:active – styles for the already visited link that is clicked on.
div:first-child:hover – styles for all the first blocks in their parents that are hovered over.

As you can see, such selectors provide great opportunities in terms of styling elements. Use them and you can easily reach any elements.

Combining selectors

Another important rule you need to know about. Style class selectors can be written without separating them from each other. For example:
.class1.class2 – will select those elements that have both of these classes.
.class1.class3.class8 – will select elements to which all three style classes are attached.

Nested selectors

If we separate selectors from each other with spaces, we can reach the element we need. Examples:
Table td – selects all cells in tables
Ul li a – selects all links located in list items (and list items, in turn, lie in the lists themselves)
.class1 p – will select all paragraphs with the attribute class = “class1”
.class2 p span – will select all tag contents , lying in paragraphs with class class2.

You can nest and combine in this way as many times as you like. Examples:
#header .logo span:first-letter()– selects the first letter in the span of the logo, which is located in the header
.class1.class2:hover() – will define the hover style for elements that have both style classes.

Child selectors

If you need to style parent elements that are DIRECTLY subsidiaries, then you need to write it like this:
Ul > li() – will select list items that are nested directly in it, and not in other tags
P > a() – will select only those links in paragraphs that lie directly within them, and not nested in other tags (which, in turn, are already nested in paragraphs)
Example:

If you write a selector like this P > a , will the styles be applied to the link in the example above? No, because it is still nested in another tag, that is, it is not a direct child.

Adjacent selectors

The last thing we'll look at today. If you write it in css like this:
.class1 + .class4() , then this selector will select the element with the attribute class = "class4" , and this element must appear in the HTML code immediately after the element with the class class1. Only in this case everything will work. Let's look at an example again:

Will the above selector (.class1 + .class4()) work? No, because the elements are not next to each other. Between them is the img tag. If you remove it, then everything will work.

So, we have looked at the most basic and simplest selectors. Surely this knowledge will be enough for you to solve 95% of problems. In the next article I will describe some more specific CSS selectors.

Attribute selectors

Allows you to select specific elements without assigning a style class or identifier to them.

Attribute selectors are those selectors in which an attribute or an attribute with a value is written in square brackets. A few examples to make it clear:
* – selects all elements that have an href attribute with any value.
input – selects all input elements that have a disable attribute (all disabled fields).
input – selects all fields whose type is password , that is, fields for entering a password.
img – selects an image that has the src attribute = "/logo.png" specified.

As you can see, writing CSS attribute selectors is not that difficult. Their most important difference is the square brackets, in which either just an attribute or an attribute with its exact value is written. But the functionality of these selectors does not end there.

Advanced css attribute selectors

All of the following selectors are case sensitive.
Search at the beginning of a line
div – selects all divs that have a style class starting with "block" . Thus, for example, the following blocks will be selected: "block-head", "block-3", "blocknote" . The main thing is that there is a keyword at the beginning of the meaning.

Finding at the end of a line
A – selects all links whose address ends in .rar . Thus, if you can download something on your website, then you can add an icon next to all links to archived files.

Finding a substring everywhere in a value
span – will select all span tags that have “art” in their class name anywhere in the name. Thus, for example, spans with the following classes will be selected: party, clart, art-1.

Search for prefixes
p – will select paragraphs with a style class that have a name that either exactly matches “first” or that contains the prefix first- that begins the class name.

Finding words within meaning
input– will select all input elements in which the value of the identifier attribute contains the word text . It differs from searching for a substring everywhere in that it is the word that must be included, not the substring.

The last two options are rarely used and are unlikely to be useful to you often, but for general development you can still know about them.

What are attribute selectors useful for?

Using such selectors, you can select many HTML elements without giving them style classes. In some cases, using this method you can shorten the code and simplify your work. For example, above I gave an example with an icon for archives. Here another idea appeared. For example, on your website you often link to one other resource (Wikipedia, say) and you want to display a special icon next to links to Wikipedia, which other links should not have.

You can implement it like this:

A (css rules)

In fact, there are many more ways to use attribute selectors. They can to some extent simplify the work where it is needed. Use css and subscribe to the blog to learn more about web development.

Css3 selectors and pseudo classes

About new css3 selectors, which I didn’t write about in previous articles.

Improved work with forms

These are new pseudo-classes. Basically they all concern new possibilities of forms.
:enabled – the pseudo-class will select all active fields. That is, those in which you can write something or are at least readable.
:disabled is the opposite pseudo-class, selects all disabled fields. Accordingly, with its help you can add additional styles to such fields.
:read-only – select all input, which are read-only.
:read-write – selects all fields that are editable.

Adding styles with validity in mind

There are also very interesting pseudo-classes with which you can assign styles depending on the validity or invalidity of the entered value. Previously, this could only be done using JavaScript.
:valid – selects all fields in which the entered value satisfies the requirements. The requirements themselves are usually specified using the pattern attribute. May also depend on the field type. For example, a field containing an email address will be considered invalid if there is no @ in the entered value.
:invalid – accordingly, selects all invalid fields in which the value does not correspond to what is expected. For example, you can make the text color in fields like this red:

Input:invalid( Color: red; )

Now if we write incorrect values ​​in the fields, the text turns red. Accordingly, you can also use pictures of a checkmark and a cross to show the user whether he filled out everything correctly.

Styles for required fields

I would also like to note that the corresponding pseudo-class has appeared for required fields.
:required – will select elements that have this attribute. That is, all fields are required to be filled out.
:optional – the opposite class, will select fields that are optional.

Pseudo-class:not

:not is a kind of anti-selector that allows you to determine which elements DO NOT USE styles. A couple of examples.
A:not(:last-child)() – will select all links on the page except the last one.
.nav:not(li)() – will select all elements with class nav, but these should not be list items (li).
#article p:not(.special:first-child) – will select all paragraphs in the article block except the first paragraph with the special class.

As you can see, a condition is written in parentheses for the pseudo-class: what exactly needs to be excluded from the selection. You can also write combination selectors in the condition, so you can select and exclude anything you want.

This is the pseudo-class that is sometimes needed, it is needed not only in theory, but also in practice. Oh yes, you can also continue composing the selector after :not(). For example:
Div:not(#header) .wrap – selects all divs with the wrap class, except the div with id = "header"

These were selectors that were introduced in CSS3.

Priority of css selectors

To determine which styles take precedence, use these simple rules:
ID is the highest priority selector. If an element has a style class and an id , and both are assigned the same properties with different values, then the styles written for the id will be executed.

The class is a higher priority selector than the tag selector (p, table, ul). A pseudo class has the same weight as a simple class. p:first-line takes precedence over .firstline because the second selector is just a class, while the first is a tag selector + pseudo-class.

Another useful rule is that the more specific the selector, the more prioritized styles are for it. For example, between body and p, the paragraph wins the battle because it is a more specific selector than body (because it is the entire page, so not very specific). Table p , in turn, is more specific than just p . In general, just be aware of these rules.

Bottom line

This article did not cover attribute selectors, but in general I have already written about them before. I wish you success in learning website building, including CSS selectors.

I would also like to add that if you use jQuery, then it has its own selectors, although they are very similar to these, but there are slight differences.

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

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

Identifiers

To identify elements unique 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:

Site header

Main content

Footer

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:

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; )