home > Iron > css element type selector. Selectors. Selectors in CSS

css element type selector. Selectors. Selectors in CSS

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

1) .X

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

CSS selector by class X. The difference between an id and a class is that multiple elements on a page can have the same class, and the 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 selector by id. The pound sign in front of the CSS selector X selects the element whose id = X. When styling by id, you should always remember that it must be unique - there should be only one such id on the page. Therefore, it is better to use selectors by class, class combinations or tag names. However, id selectors are great for automated testing because they allow you to immediately interact with the right element and be sure that it is the only one on the page.

Chrome
Firefox
safari
Opera

3) *

* ( margin: 0; padding: 0; )

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

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

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

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.

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 class? You should use CSS selector by element type. For example, to select all ordered lists on a page, use ol (...) as shown above.

Chrome
Firefox
safari
Opera

5) X Y

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

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

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 following immediately after each div element will receive a special font type and size.

IE7+
Firefox
Chrome
safari
Chrome

7) X > Y

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

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

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

The #content > ul CSS selector will only select the 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.

Chrome
Firefox
safari
Opera

8) X ~ Y

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

Sister (sublingual) elements selector less strict than X + Y. It will select not only the first, but also all other elements of p following ol.

Chrome
Firefox
safari
Opera

a:link ( color: green; ) a:visited ( color: grey; )

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

Chrome
Firefox
safari
Opera

10) X

a (color: red; )

CSS selector by attribute. In this example, only those links that have a title attribute are selected.

Chrome
Firefox
safari
Opera

11) X

a (color: yellow; )

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). Thus, links from https://www..stijit. will be selected as well. Gold color will be applied to all selected links.

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. Karat “^” is a character to indicate the beginning of a line. Thus, to select all tags whose href begins with http, you need to use the CSS selector with karat, as shown in the example above.

Chrome
Firefox
safari
Opera

14) X

a (color: green; )

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

Chrome
Firefox
safari
Opera

15) X

a (color: green; )

Here we apply CSS selector by custom attribute. 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.

Chrome
Firefox
safari
Opera

16) X

The tilde (~) allows you to select 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 specify that the link is external and leads to an image.

link

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

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

Chrome
Firefox
safari
Opera

17) X:checked

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

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

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 :after pseudo-class, an empty string is created after the block with the .clearfix class, after which it is cleared. This approach is used when it is not possible to apply the overflow: hidden property.

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

IE6+ (Only applies to links in IE6)
Chrome
Firefox
safari
Opera

20) X:not(selector)

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

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

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

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

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 sub-elements, such as the first line of a paragraph or the first letter in a word. Applies to block elements only.

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

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.

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. It only appeared from CSS 3.

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.

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 want to select the second item in the list, use li:nth-child(2) . All pseudo-classes using nth-child only appeared starting with CSS 3.

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 need to select the third element from the end? Instead of writing li:nth-child(109) , one can use nth-last-child last child selector. This method is the same as the previous one, but the countdown is from the end.

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 the page and you only want to style the third one that doesn't have a unique id, you should use nth-of-type.

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 designed to select the nth element of a particular type from the end.

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 single li.

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

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

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

A set of design rules (which in turn consist of selectors with a block of ads) applied to certain html tags, due to which the appearance of the site is formed.

CSS selector- this is an integral part of the CSS rule responsible for determining specific html tags to which the design styles specified in this rule will be applied.

So, it is thanks to selectors that the browser understands which elements of the page code need to apply specific design styles.

The element selection tool in CSS is extremely flexible and convenient to select both individual code elements and entire groups of elements defined by one or another feature.

Types of css selectors

Like sentences in text, CSS selectors come in simple and complex forms. The difference between them is that complex ones are obtained by combining several simple ones and are used to fine-tune the final design of the resource.

Only unlike regular text in cascading style sheets does it matter in what order and what selectors we use. Moreover, not only what elements and on what basis we choose, but also the processing speed of our code as a whole will depend on this, but we will talk about the subtleties in future articles.

Simple selectors

The universal selector is responsible for selecting generally all elements in the document. Specified by an asterisk. It is usually used to reset the styles of browsers installed in them by default, so that everyone who visits the site does not lose the design in case of using some kind of their own browser settings or various plug-ins ...
* ( some style; )
Type Selector - Selects all tags that match a specific type. Specified by the tag name. Used to set general rules for document design, for example, set different fonts for headings and plain text of the document.
h1 ( some style; )
– will apply the css rule to all tags with a specific class name. Specified by a dot with the name of the class written immediately after it. Perhaps the most common selector in layout. It is usually used to set different styles for tags of the same type but different in functionality.
LeftColumn ( some style; )
The ID selector is used to style unique elements on the page. Set by a hash followed by the id name. It is used if you need to style one specific page element.
#alertButton ( some style; )
– selects tags that have the attribute present. Specified by the attribute name in square brackets. It can be used both for designing a group of tags in which the specified attribute is simply present, and for a group of tags in which the specified attribute with a specific value is present.
[ type] ( some style; ) [ type= "submit" ] ( some style; ) input[ type= "submit" ] ( some style; )

Complex selectors

Descendant selector – selection of descendants (tags inside another tag) of elements. Specified with a space (parent - space - child).
div p ( some style; )
Child selector - selects an element directly nested within another element. Specified by the symbol ">" (parent-check-child). A child element differs from a child element in that it comes directly after the parent (the first level of nesting). While any tag inside another is considered a descendant, regardless of the nesting level.
Sidebar> ul ( some style; )
Sibling element selector - selects the tag that comes immediately after another tag (not enclosed within, but following). Set by plus (first element - plus - sister element). Rarely used in practice. A prerequisite for the application is the presence of a common parent for all elements with a combined "+" sign.
h1+ p ( some style; )

Pseudo-classes and pseudo-elements

The above classification of CSS selectors depended solely on the markup of the document. If we want to change the appearance of elements depending on the change in its state on the page (for example, changing the color of a button on hover), then we can use pseudo-class and pseudo-element selectors.

Remember that unlike html, CSS is case-sensitive. That is, the .active and .Active classes are not the same thing! They will be applied to different elements, if any, in the document.
Name the selectors for decoration in such a way that you don’t get confused later: .leftColumn is a good name, .left depends on the situation, but not very good, .llll is some kind of garbage, you yourself will say without looking at the code where did this class come from?
Let me remind you once again - if there is only one element on the page, so all unique, then we use id for it, but if there is a possibility that there will be another such or simply similar elements on the page, then use classes for decoration.

Summing up

Selectors in CSS- this is a powerful tool for identifying certain elements of a page or a group of elements united by a specific feature for further applying styles to them from the ad block related to this selector.

After mastering the general principles of interaction and creating selectors, you will forget about the problems with the design of web documents. A good knowledge of selectors can significantly reduce the time of layout of html pages.

The topic, although it seems extremely confusing at first glance, becomes simple and understandable after a period of practice, supported by a qualitative theory.

The CSS document appearance language is constantly evolving. Not only does its power and functionality grow over time, but its flexibility and ease of use also increase.

Let's start to figure it out. Open any CSS tutorial, at least one section will be dedicated to the kinds of selectors. This is not surprising, since they are one of the most convenient ways to manage page content. With their help, you can interact with absolutely any HTML element. Now there are 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 is enough to 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 for recording. 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 the class attribute. Suppose you have three blocks in your code

, each of which you need to set a specific color. How to do it? Standard CSS selectors by tags will not work, they specify the parameters for all blocks at once. The exit is simple. Assign a class to the elements. For example, the first div got class='red', the second one got class='blue', and the third one got class='green'. Now they can be selected using CSS tables.

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

Important! It is recommended to use meaningful values for the class attribute. It is considered bad form to use transliteration (eg krasiviy-blok) or random combinations of letters/numbers (ojfh834871). In such code, you will definitely get confused, not to mention what difficulties those who will deal with the project after you will have to face. The best option is to use some kind of 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 using the methodology, as well as inheritance of preprocessors. Be sure to learn less, sass or some other preprocessor, they will greatly simplify the work.

Selector by ID

About this option, the opinions of layout designers and programmers are ambiguous. Some textbookscssnot recommended at allid,because they can cause problems with inheritance if used carelessly. However, many experts actively place them throughout the markup. You decide. The syntax is: the hash symbol ("# ”), then the name of the block. For example,#red.

IDdiffers from the class in several ways. First, no two are the same on a page.ID.They are assigned unique names. Secondly, such a selector has a higher priority. This means that if you give the block a classredand indicate in the tablescssred and then assign it to the sameid 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 large numbersIDAndclass.

Important! If you are using the BEM methodology (or equivalents),IDyou generally don't need it. This layout technique involves the use of unique classes, which is much more convenient.

Universal selector

Syntax: asterisk sign ("*") and curly brackets, i.e. *{}.

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

Advantages - you can manage a large number of elements at the same time.

Disadvantages - insufficiently flexible option. In addition, using this selector slows down the page in some cases.

By attributes

Gives the ability to control an element with a specific attribute. For example, you have multiple input tags with different type attribute. One of them is text, the second is password, the third is number. Of course, you can set classes or IDs for each, but this is not always convenient. CSS selectors by attributes allow you to specify values for certain 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 can have attributes. But that's not all! The CSS specification has the ability to manipulate elements even more conveniently!

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

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:

The CSS will select all elements that have "Caspian" characters in their title, i.e. both "Caspian" and "Caspian".

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

or end with:

{}.

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

Disadvantages - used relatively rarely, only in specific cases. Many typesetters prefer methodologies, since specifying a class can be easier than arranging multiples and equals signs. In addition, these selectors do not work in Internet Explorer version 7 and below. However, who needs the old Internet Explorer now?

Pseudo-class selectors

The pseudo-class denotes the state of an element. For example, :hover is what happens to a 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, because thanks to it you can make the page "live" without the use of JavaScript. For example, you want to make it so 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 turn red not instantly, but for half a second.

Advantages - are actively used to "revitalize" the pages. Easy to use.

Disadvantages - none. It's really a handy tool. However, inexperienced typesetters can 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 in the HTML, but can still be manipulated. Didn't understand anything? Everything is easier than it seems. For example, you want to make the first letter of a string large and red, while leaving the rest of the text small and black. Of course, it is possible to enclose this letter in a span with a certain class, but this is long and boring. It's much easier to select the entire paragraph and use the::first-letter pseudo-element. It allows you to control the appearance of the first letter.

There are quite a few pseudo-elements. To list them within the framework of one article is unlikely to succeed. You can find relevant information in your favorite search engine.

Advantages - make it possible to flexibly customize the appearance of the page.

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

Summarize

The selector is a powerful tool for controlling the flow of a document. Thanks to it, you can select absolutely every component of the page (even those that exist only conditionally). Be sure to learn all the options available, or at least write them down. This is especially important if you are creating complex pages with a modern design and lots of interactive elements.

Cascading Style Sheets CSS (Cascading Style Sheets) is a style standard declared by the W3C consortium. Term cascading indicates the possibility of merging different kinds of styles and the inheritance of styles by inner tags from outer ones.

CSS is a language that contains a set of properties to define the appearance of a document. The CSS specification defines properties and a descriptive language for relating to HTML elements.

CSS is an abstraction in which the appearance of a Web document is defined separately from its content.

Some styles are not supported by all browsers. However, you can assign any styles, because unsupported styles will simply be ignored.

You may also need:

There are three types of styles for adding styles to a document.

Internal styles

Internal styles are defined by the attribute style specific tags. The internal style only affects the elements defined by such tags. This method differs little from traditional HTML.

Example

Paragraph with blue text

RESULT:

Paragraph with blue text

Paragraph with red text

You shouldn't use internal styles too often, because then the Web document becomes overloaded with code and its appearance is difficult to change.

Global Styles

Global CSS styles are placed in a container , located in turn in the container ... .

Attribute type="text/css", previously required for the tag .........

Gray text color in all paragraphs of a web page

RESULT:

Gray text color in all paragraphs of a web page

Gray text color in all paragraphs of a web page

External (linked) styles

External (linked) styles are defined in a separate file with the extension css. External styles allow all pages of the site to look the same.

To link to a file that describes styles, use the tag located in a container ... .

This tag must have two attributes: rel="stylesheet" And href A that specifies the address of the stylesheet file.

Example
......... ......... .........
Connecting Styles

The rule for connecting global and external styles consists of selector And style declarations.

The selector, located on the left side of the rule, specifies the element(s) for which the rule is set. Next, the style declarations are listed in curly braces, separated by semicolons. For example:
P ( text-indent: 30px; font-size: 14px; color: #666; )
The style declaration is a pair CSS property: CSS value.

For example: color: red

When internally including a style, the CSS rule that is the value of the attribute style, consists of style declarations separated by semicolons. For example:
CSS selectors

Selector Description More
* Any element
E The element defined by the E tag
E#myid E element with id "myid"
E.myclass Element E of class "myclass"
E Attribute Existence Selector
E Attribute equality selector
E Attribute selector with a list of values Attribute selectors
E Attribute prefix selector
E Attribute suffix selector
E Attribute substring selector
e:link Element E - a link not yet visited by the user Dynamic Pseudo-Classes
E:visited Element E - link already visited by the user Dynamic Pseudo-Classes
E: hover The E element when hovering over it with the mouse Dynamic Pseudo-Classes
E: active Element E activated by the user Dynamic Pseudo-Classes
E: focus E element in focus Dynamic Pseudo-Classes
E:target The E element that is the target of the link Target pseudo-class
E:lang The E element written in the specified language Language pseudo-class
E:enabled Element E - accessible form element State Pseudo-Classes
E:disabled Element E is an unavailable form element State Pseudo-Classes
E:checked Element E - enabled checkbox or radio button State Pseudo-Classes
E:indeterminate Element E - undefined checkbox or radio button State Pseudo-Classes
E: root Element E, Document Root Structural Pseudo-Classes
E:nth-child(n) Element E, nth child of parent element Structural Pseudo-Classes
E:nth-last-child(n) Element E, nth child of parent element, counting from the end Structural Pseudo-Classes
E:nth-of-type(n) nth element of type E Structural Pseudo-Classes
E:nth-last-of-type(n) nth element of type E, counting from the end Structural Pseudo-Classes
E:first-child The E element, the first child of the parent Structural Pseudo-Classes
E:last-child The E element, the last child of the parent Structural Pseudo-Classes
E:first-of-type First element of type E Structural Pseudo-Classes
E:last-of-type Last element of type E Structural Pseudo-Classes
E:only child Parent's only child Structural Pseudo-Classes
E:only-of-type Parent's only element of type E Structural Pseudo-Classes
E:empty An E element with no children Structural Pseudo-Classes
E:not(X) An E element that doesn't match the simple selector X Negation pseudo-class
E::first-line The first line of the E element Pseudo elements
E::first-letter The first letter of the element E Pseudo elements
E::before Content up to the E element Pseudo elements
E::after Content after the E element Pseudo elements
E::selection Selection in element E Pseudo elements
E F An F element that is inside an E element
E > F An F element that is directly inside an E element
E+F The F element that immediately follows the E element
E~F The F element that comes after the E element
Universal selector

The universal selector matches any element in the html document.

The asterisk character (*) is used to designate a universal selector.

It is used when it is necessary to set the same style for all elements of a Web page. For example:
* ( margin: 0; padding: 0; )
In some cases, the asterisk character (*) may be omitted:
*.myclass And .myclass equivalents,
*#myid And #myid are equivalent

Tag selectors

Any html tag can act as a selector, for which styling rules are defined. For example:
H1 (color: red; text-align: center;)
If several elements will have a common style, then the selectors corresponding to them can be listed in the style sheet separated by commas. For example:
h1, h2, h3, h4 (color: red; text-align: center;)
ID selectors

HTML provides the ability to assign a unique ID to any tag. The identifier is given by the attribute id. For example:

...

The identifier value must begin with a Latin letter and may contain letters (,), numbers (), hyphens (-), and underscores (_).

Values of all attributes id in an html document must be unique. If meet id with the same values, these identifiers are ignored and the web page code becomes invalid.

In CSS code, an identifier selector is denoted by a pound sign (#). Since the identifier id only applies to unique elements, the tag name before the pound sign (#) is usually omitted:
Div#a1 (color: green;)
likewise
#a1 (color: green;)
It is advisable to use id not for styling the element, but for accessing it through scripts or following a link.

Class selectors

Class selectors are most commonly used for styling. The class for the tag is set by the attribute class. For example:

...

The class name must start with a Latin letter and can contain letters (,), numbers (), hyphens (-), and underscores (_).

If attribute id is used for unique identification, then using the attribute class the tag belongs to one group or another.

In CSS code, an identifier selector is denoted by a dot (.). Different tags can be attributed to the same class. In this case, the tag name is omitted before the dot (.) sign:
i.green (color: #008000;) b.red (color: #f00;) .blue (color: #00f;)
You can specify several classes for a tag at the same time by listing them in the attribute class through the gap. In this case, the styles of each of the specified classes are applied to the element.

...

If some of these classes contain the same style properties, but with different values, then the style values of the class below it in the CSS code will be applied.

Attribute selectors

There are many attribute selectors that can be used to style a tag based on its attributes.

h1 (color: #800000;) /* h1 element that has a title attribute */
input ( border: 1px solid #cc; padding: 4px 6px; width: 300px; )
a ( text-decoration: none; border-bottom: 1px solid #06c; color: #06c; )
span ( display: inline-block; background-image: url("/img/icon_sprite.png"); )
a, a ( background: url("pic.gif") bottom left no-repeat; display: inline-block; width: 32px; )
( display: block; float: left; width: 280px; )
There must be no space between the tag name and the square bracket ([)!

The universal selector, tag, identifier, class, and attribute selectors, and pseudo-classes are simple selectors.

Simple selectors can be linked in specific sequences based on element relationships in the Web document tree. Such constructions are called combinators.

Contextual Selectors

One of the most commonly used combinators is the context selector.

Contextual or descendant selectors define multiple elements, one of which is inside another. In a context selector, simple selectors are separated by a space.

Example

Pushkin A.S.

"Shot"

"Blizzard"

"Dubrovsky"

Gogol N.V.

"Inspector"

"Taras Bulba"

"Dead Souls"

Tolstoy L.N.

"War and Peace"

"Anna Karenina"

"Resurrection"

RESULT:

Pushkin A.S.
"Shot"

"Blizzard"

"Dubrovsky"

Gogol N.V.
"Inspector"

"Taras Bulba"

"Dead Souls"

Tolstoy L.N.
"War and Peace"

"Anna Karenina"

"Resurrection"

Child selectors

A child selector defines an element that is inside another directly. In a child selector, simple selectors are separated by a greater-than sign (>).

Example

Pushkin A.S.

"Shot"

"Blizzard"

"Dubrovsky"

Gogol N.V.

"Inspector"

"Taras Bulba"

"Dead Souls"

Tolstoy L.N.

"War and Peace"

"Anna Karenina"

"Resurrection"

RESULT:

Pushkin A.S.
"Shot"

"Blizzard"

"Dubrovsky"

Gogol N.V.
"Inspector"

"Taras Bulba"

"Dead Souls"

Tolstoy L.N.
"War and Peace"

"Anna Karenina"

"Resurrection"

Adjacent selectors

The adjacent selector defines a plus sign (+) that separates two sequences of simple selectors. The elements represented by these sequences are within the same container and follow second after the first directly, not separated by any other tags.

Example

REFLEXOLOGY

RESULT:

REFLEXOLOGY

Adjacent selectors

An adjacent selector defines a tilde character (~) that separates two sequences of simple selectors. The elements represented by these sequences are within the same container and follow second after the first (not necessarily directly).

Example

REFLEXOLOGY

"All acts of conscious and unconscious life are, by way of origin, reflexes." THEM. Sechenov

Reflexology is the treatment of diseases through the control of reflexes. It is successfully used in complex treatment programs or as an individual technique.

RESULT:

REFLEXOLOGY

"All acts of conscious and unconscious life are, by way of origin, reflexes." THEM. Sechenov

Reflexology is the treatment of diseases through the control of reflexes. It is successfully used in complex treatment programs or as an individual technique.

CSS selectors are one of the main features of the CSS language. Selectors allow you to refer to both a group of elements, and to only 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, the paragraph tag. Such a rule will add styles to all paragraphs on the web page.

What are css selectors?

The tag selector is the simplest. It has been shown 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 for one letter. Then, in the css file, you can refer to this element by writing your own styles for it. To do this, put a period and write the name of the style class after it. Examples:
.about() - the rules will be applied to all elements that have the attribute class = "about"
.down() - the rules will be applied to all elements that have the attribute class = "down"
.float() - the rules will be applied to all elements that have the attribute class = "float"

As you can see, the main thing is to put an end to it. A style class can be bound to an unlimited number of elements. An element can have multiple classes.

Identifier is another kind of selector. One identifier can be assigned to only one element. It cannot have two id's, and the id attached to this element cannot be specified 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 the value.

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

#first(
font-size: 22px
}

We refer to the paragraph id = first. The style will apply only to it. The rest of the paragraphs will not change the font size.

Selector	Description	More
*	Any element
E	The element defined by the E tag
E#myid	E element with id "myid"
E.myclass	Element E of class "myclass"
E	Attribute Existence Selector
E	Attribute equality selector
E	Attribute selector with a list of values	Attribute selectors
E	Attribute prefix selector
E	Attribute suffix selector
E	Attribute substring selector
e:link	Element E - a link not yet visited by the user	Dynamic Pseudo-Classes
E:visited	Element E - link already visited by the user	Dynamic Pseudo-Classes
E: hover	The E element when hovering over it with the mouse	Dynamic Pseudo-Classes
E: active	Element E activated by the user	Dynamic Pseudo-Classes
E: focus	E element in focus	Dynamic Pseudo-Classes
E:target	The E element that is the target of the link	Target pseudo-class
E:lang	The E element written in the specified language	Language pseudo-class
E:enabled	Element E - accessible form element	State Pseudo-Classes
E:disabled	Element E is an unavailable form element	State Pseudo-Classes
E:checked	Element E - enabled checkbox or radio button	State Pseudo-Classes
E:indeterminate	Element E - undefined checkbox or radio button	State Pseudo-Classes
E: root	Element E, Document Root	Structural Pseudo-Classes
E:nth-child(n)	Element E, nth child of parent element	Structural Pseudo-Classes
E:nth-last-child(n)	Element E, nth child of parent element, counting from the end	Structural Pseudo-Classes
E:nth-of-type(n)	nth element of type E	Structural Pseudo-Classes
E:nth-last-of-type(n)	nth element of type E, counting from the end	Structural Pseudo-Classes
E:first-child	The E element, the first child of the parent	Structural Pseudo-Classes
E:last-child	The E element, the last child of the parent	Structural Pseudo-Classes
E:first-of-type	First element of type E	Structural Pseudo-Classes
E:last-of-type	Last element of type E	Structural Pseudo-Classes
E:only child	Parent's only child	Structural Pseudo-Classes
E:only-of-type	Parent's only element of type E	Structural Pseudo-Classes
E:empty	An E element with no children	Structural Pseudo-Classes
E:not(X)	An E element that doesn't match the simple selector X	Negation pseudo-class
E::first-line	The first line of the E element	Pseudo elements
E::first-letter	The first letter of the element E	Pseudo elements
E::before	Content up to the E element	Pseudo elements
E::after	Content after the E element	Pseudo elements
E::selection	Selection in element E	Pseudo elements
E F	An F element that is inside an E element
E > F	An F element that is directly inside an E element
E+F	The F element that immediately follows the E element
E~F	The F element that comes after the E element

Articles By topic:

css element type selector

What a selector is 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 take a look at the basic CSS selectors.1) .x .topic-title ( background-color: yellow; )

Bicycle speakers: the main differences, how to choose

In order to add drive, brightness and emotions to the journey, you can build speakers on the bike and complement the trip with listening to music. Despite the fact that all bicycle audio systems on the market today have a similar combination of characteristics

Auto payment service to a megaphone from Sberbank Automatic replenishment of a megaphone account

In daily running around, there may not be time to replenish the account on your mobile phone. As a result, we have every chance of being left without communication, and at the most crucial moment. If you do not have a free minute to go to the payment terminal and

Tariff MTS "3D Zero": reviews Changes in the package super mts dnipro 3d

By and large, it is difficult for me to blame him for the fact that I very quickly said goodbye to the amount of 40 UAH. On the one hand, I overlooked it. But on the other hand, the operator used the hackneyed technique of "small print", which I fell for. So, for certain

Popular

2023-08-07 01:53:28 Characteristics of the phone "Alcatel One Touch POP C7", reviews

2023-08-06 01:51:16 Utilities for resuscitation of damaged laser discs

2023-08-05 02:06:57 How to find out by mobile phone number where they called from?

2023-08-03 01:48:44 How to install Windows operating systems using the WinNTSetup program Installing Windows on a different disk partition

2023-08-02 01:46:50 Writing square brackets in Microsoft Word How to remove gray square brackets in word

2023-08-01 01:47:01 where to get daedric armor in skyrim

2023-07-31 01:45:49 Benefits of merging hard drives or partitions

2023-07-30 01:44:08 How to remove ads in an android app

2023-07-29 01:44:38 Find out the model of the macbook by the serial number

2023-07-28 01:34:04 What is Yandex - why is it called Yandex

New

2023-07-26 01:45:02 How to disable paid subscriptions on Beeline

2023-07-26 01:45:02 Rating of sports watches with GPS for running Rating of sports watches with gps and heart rate monitor

2023-07-25 01:46:02 Lenovo G500 laptop drivers Lenovo g500 light sensor driver

2023-07-25 01:46:02 Download and install drivers for laptop Lenovo G500 Download sound driver for laptop lenovo g500

2023-07-24 01:35:09 Web services We accept a file by web service 1c

2023-07-23 01:43:56 Screen resolution ruButcher

2023-08-11 01:47:27 css element type selector

2023-08-10 01:59:11 Bicycle speakers: the main differences, how to choose

2023-08-09 02:00:00 Auto payment service to a megaphone from Sberbank Automatic replenishment of a megaphone account

2023-08-08 01:51:03 Tariff MTS "3D Zero": reviews Changes in the package super mts dnipro 3d

2023-08-07 01:53:28 Characteristics of the phone "Alcatel One Touch POP C7", reviews

2023-08-06 01:51:16 Utilities for resuscitation of damaged laser discs

Advertisers | Contacts

2023-08-07 01:53:28	Characteristics of the phone "Alcatel One Touch POP C7", reviews
2023-08-06 01:51:16	Utilities for resuscitation of damaged laser discs
2023-08-05 02:06:57	How to find out by mobile phone number where they called from?
2023-08-03 01:48:44	How to install Windows operating systems using the WinNTSetup program Installing Windows on a different disk partition
2023-08-02 01:46:50	Writing square brackets in Microsoft Word How to remove gray square brackets in word
2023-08-01 01:47:01	where to get daedric armor in skyrim
2023-07-31 01:45:49	Benefits of merging hard drives or partitions
2023-07-30 01:44:08	How to remove ads in an android app
2023-07-29 01:44:38	Find out the model of the macbook by the serial number
2023-07-28 01:34:04	What is Yandex - why is it called Yandex

2023-07-26 01:45:02	How to disable paid subscriptions on Beeline
2023-07-26 01:45:02	Rating of sports watches with GPS for running Rating of sports watches with gps and heart rate monitor
2023-07-25 01:46:02	Lenovo G500 laptop drivers Lenovo g500 light sensor driver
2023-07-25 01:46:02	Download and install drivers for laptop Lenovo G500 Download sound driver for laptop lenovo g500
2023-07-24 01:35:09	Web services We accept a file by web service 1c
2023-07-23 01:43:56	Screen resolution ruButcher
2023-08-11 01:47:27	css element type selector
2023-08-10 01:59:11	Bicycle speakers: the main differences, how to choose
2023-08-09 02:00:00	Auto payment service to a megaphone from Sberbank Automatic replenishment of a megaphone account
2023-08-08 01:51:03	Tariff MTS "3D Zero": reviews Changes in the package super mts dnipro 3d
2023-08-07 01:53:28	Characteristics of the phone "Alcatel One Touch POP C7", reviews
2023-08-06 01:51:16	Utilities for resuscitation of damaged laser discs