Now try to understand how to highlight point 2.

Solution 1

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

Solution 2

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

Solution 3

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

Compatibility

• IE9+
• Firefox 3.5+
• Safari
• Opera

CSS contains style rules that are interpreted by the browser and then applied to appropriate elements in your document. A style rule consists of three parts:

• Selector is the HTML tag to which the style will be applied. This can be any tag, for example,

  or etc.

  Property is an attribute type of an HTML tag. Simply put, all attributes in HTML are converted to CSS properties. These can be colors, borders, padding, etc.

  Meaning- is set to the property. For example, the color property could be green, #008000, etc.

  The syntax for selectors in CSS is as follows:

  Selector ( property: value )

  Example. You can set the table border like this:

  Table ( border: 2px solid #FF8C00; )

  Here the selector syntax is: table is the selector and border is the property and 2px solid #FF8C00 is the value of that property.

  You can specify selectors in various ways as you see fit. Below are the types of selectors.>

  Standard selectors

  This is the same selector that you saw above. Again, another example to give color to all first level headings:

  H1 ( color: #8B4513; )

  Universal selectors

  Instead of selecting elements of a specific type, a universal selector quite simply matches the name of any element type:

  * ( color: #808080; )

  This rule displays the contents of each element in our document in gray.

  Descendant selectors or nested selectors

  Suppose you want to apply a style rule to a certain element only when it is inside a certain element, then nested selectors or descendant selectors will help you with this. As shown in the following example, the style rule will be applied to the element only when it is inside a tag

  .

  Ul em ( color: #CD5C5C; )

  Class selectors

  You can set style rules for elements based on the class attribute. All elements that have this class will be formatted according to a certain rule.

  Blue ( color: #0000FF; )

  class="blue". You can make the class selector a little more specific. For example:

  H1.blue ( color: #0000FF; )

  with attribute class="blue".

  You can apply multiple class selectors to one element. Consider the following example:

  This paragraph will be formatted with classes center And bold.

  ID selectors

  You can set style rules for elements based on the id attribute. All elements that have this ID will be formatted according to a certain rule.

  #blue ( color: #0000FF; )

  This rule displays the content in our document in blue for each element with the attribute id="blue". You can make the id selector a little more specific. For example:

  H1#blue ( color: #0000FF; )

  This rule displays content in blue only for elements

  with attribute id="blue".

  The true power of id selectors is when they are used as the basis for descendant selectors, for example:

  #blue h2 ( color: #0000FF; )

  In this example, all second level headings will appear in blue when they are in tags with the attribute id="blue".

  Child selectors

  You already know descendant selectors. There is another type of selector that is very similar to child selectors but has different functionality, the child selector. Consider the following example:

  Body > p ( color: #0000FF; )

  This rule will display all paragraphs in blue if they are a direct child of the element . Other paragraphs placed inside other type elements

  or

  Adjacent selectors HTML elements that follow each other are called adjacent elements. Consider the following example: Strong + em ( color: #0000FF; ) This rule will display the contents of the tag in blue if it comes after the element . Other tags , not coming after the tag , will have no effect of this rule. Attribute selectors You can also apply styles to HTML elements with certain attributes. The style rule below will match all input elements that have a type attribute with the value text: Input ( color: #0000FF; ) The advantage of using attribute selectors is that the element does not change, and the color is applied only to the desired text fields. The following rules apply to the attribute selector: p - selects all paragraph elements with the lang attribute. p - selects all paragraph elements where the lang attribute has the exact value "ru". p - selects all paragraph elements where the lang attribute contains the word "ru". p - selects all paragraph elements where the lang attribute contains values ​​that are the exact "ru" or begin with "ru". A few style rules You may need to define multiple style rules for a single element. You can define these rules to combine multiple properties and their corresponding values ​​into a single block, as shown in the following example: H1 ( color: #00CED1; letter-spacing: .2em; text-transform: lowercase; margin-bottom: 2em; font-weight: 700; ) All property and value pairs are separated by a semicolon (;). You can store them on one line or multiple lines. For better readability, keep them on separate lines. Don't worry about the properties mentioned in the above block. These properties will be explained in the following lessons. Grouping selectors in CSS You can style many selectors if you want. Simply separate the selectors with a comma, as shown in the following example: H1, h2, h3 ( color: #00CED1; letter-spacing: .2em; text-transform: lowercase; margin-bottom: 2em; font-weight: 700; ) This style rule will be applied to the h1, h2 and h3 elements. The order of the list does not matter when grouping selectors. All elements in the selector will have corresponding declarations applied to them. You can group different selector id's together like below: #header, #content, #footer ( position: absolute; width: 300px; left: 250px; ) // echo get_the_post_thumbnail(get_the_ID(), "relatedthumbnail"); // display my thumbnail size?> Let's talk about CSS selectors. In addition to the usual access to elements through the class name, id and the name of html tags, you can use special combinations and commands. Let's look at them in more detail in the article. Some selectors are supported by all browsers, some only by the newest versions of browsers. 1. * - selects all elements * ( margin: 0; padding: 0; ) Let's start with simple selectors and then look at more complex ones. Many developers use it to reset the margin and padding values ​​of all elements. At first glance, this is convenient, but it’s still better not to do this in production code. This CSS selector is too heavy on the browser. It can also be used to highlight all children of a particular container. #container * ( border: 1px solid black; ) In this case, all child elements of the #container block are selected. Try not to abuse it. Compatibility IE6+ Firefox Chrome Safari Opera 2. #X #container ( width: 960px; margin: auto; ) The hash sign in front of the CSS selector will highlight the element with id="container" . It's very simple, but be careful when using the id. Ask yourself: Do I absolutely need to highlight by id? id values ​​lock the style tightly to the element and are not reusable. It would be preferable to use class="" classes, tag names, or even pseudo-classes. Compatibility IE6+ Firefox Chrome Safari Opera 3.X .error ( color: red; ) This is a CSS selector of class X. The difference between id and class is that one class can own multiple elements on a page. Use classes when you want to apply a style to multiple elements of the same type. When using id, you will have to write a style for each individual element. Compatibility IE6+ Firefox Chrome Safari Chrome 4. XY li a ( text-decoration: none; ) The CSS child element selector is the most common one. If you need to select elements of a certain type from many child elements, use this selector. For example, you need to highlight all the links that are in the li element. In this case, use this selector. You should not make CSS selectors like X Y Z A B.error . Always ask yourself whether it is necessary to write such a cumbersome CSS selector to highlight a given element. Compatibility IE6+ Firefox Chrome Safari Chrome 5.X a ( color: red; ) ul ( margin-left: 0; ) What if you want to cover all elements of a given type on a page? Keep it simple, use a CSS type selector. If you must highlight all unordered lists, use ul() Compatibility IE6+ Firefox Chrome Safari Opera a:link ( color: red; ) a:visted ( color: purple; ) We use the pseudo-class:link to highlight all links that have not yet been clicked. If we need to apply a certain style to already visited links, then we use the pseudo-class:visited. Compatibility IE7+ Firefox Chrome Safari Opera 7. X+Y ul + p ( color: red; ) Selects the next element. He will choose only an element of type Y that comes immediately after the X element. In the example, the text of the first paragraph after each ul will be red. Compatibility IE7+ Firefox Chrome Safari Chrome 8. X>Y div#container > ul ( border: 1pxsolidblack; ) The difference between standard X Y and X > Y is that the CSS selector in question will only select immediate child elements. For example, consider the following code. List item Child element List item List item List item The CSS selector #container > ul will only select uls that are immediate children of the div with id =container . It will not select, for example, uls that are children of the first li s. Therefore, you can get performance benefits by using this CSS selector. In fact, this is especially recommended when working with jQuery or other libraries that select elements based on CSS selector rules. Compatibility IE7+ Firefox Chrome Safari Opera 9. X~Y ul ~ p ( color: red; ) This CSS selector is very similar to X+Y, however, it is less restrictive. Using ul + p will select only the first element after X. In this case, all p elements going to ul will be selected. Compatibility IE7+ Firefox Chrome Safari Opera 10. X a(color:green;) CSS selectors can also use attributes. For example, in this example we have selected all links that have the title attribute. Other links will remain unaffected. Compatibility IE7+ Firefox Chrome Safari Opera 11. X a ( color: #ffde00; ) Please note that there are quotes. Don't forget to do the same in jQuery and other JavaScript libraries in which elements are selected using CSS selectors. Whenever possible, always use CSS3 CSS selectors. A good rule, but too strict. What to do if the link does not lead directly to yandex.ru, but for example to http://yandex.ru/page1? In these cases we can use regular expressions. Compatibility IE7+ Firefox Chrome Safari Chrome 12. X a (color: #1f6053; ) This is what we need. A star indicates that the value you are looking for should appear somewhere in the attribute. So the CSS selector covers yandex.ru, http://yandex.ru/somepage etc. Compatibility IE7+ Firefox Chrome Safari Opera 13. X a ( background: url(path/to/external/icon.png) no-repeat; padding-left: 10px; ) Have you ever wondered how some websites can display a small icon next to external links? I'm sure you've seen them before, they're very memorable. "^" is the most commonly used character in regular expressions. It is used to mark the beginning of a line. If we want to cover all tags whose href starts with http, we need to use the CSS selector above. Note that we are not looking for "http://". This is not correct because addresses starting with https:// are not taken into account What if we want to set a style only for links leading to a photo? Need to find end lines. Compatibility IE7+ Firefox Safari Opera 14. X a(color:red;) Again, we use the regular expression character "$" to indicate the end of the line. In this one, we are looking for links that refer to jpg files, or urls that have “.jpg” at the end. Compatibility IE7+ Firefox Safari Opera 15. X a( color: red; ) How can we now write a CSS selector that will highlight links to all types of images? For example, we could write like this: A, a, a, a ( color: red; ) But this is hemorrhoids and ineffective. Another possible solution is to use custom attributes. Why don't we add our own data-filetype attribute to every link? Image link A ( color: red; ) Compatibility IE7+ Firefox Safari Opera 16. X a ( color: red; ) a ( border: 1pxsolidblack; ) Here's something special. Not everyone knows about this CSS selector. The tilde (~) allows you to highlight a specific attribute from a comma-separated list of attributes. For example, we can set our own data-info attribute, which includes several keywords separated by spaces. So, we can indicate that the link is external and that it links to an image. "Click Me Here, the Html code is in place, now let’s write the styles. Not bad, right? Compatibility IE7+ Firefox Safari Opera 17. X:checked input:checked ( border:1pxsolidblack; ) This pseudo-class only highlights UI elements such as a radio button or a checkbox. Moreover, those that are marked/selected. Very simple. Compatibility IE9+ Firefox Safari Opera 18. X:after The :before and :after pseudo-classes are very cool. It seems that every day there are new ways to use them effectively. They simply generate content around the selected element. Many people became familiar with these pseudo-classes while working with the clear-fix hack. Clearfix:after ( content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; ) .clearfix ( *display: inline-block; _height: 1%; ) This hack uses :after to add a space after an element and prevent it from wrapping. According to the CSS3 specification, you must use two colons (::). However, you can use a single colon for compatibility. Compatibility IE8+ Firefox Safari Opera 19. X:hover div:hover ( background: #e3e3e3; ) Want to apply a style to an element when you hover over it? Then this CSS selector is for you. Keep in mind that older versions of Internet Explorer only apply :hover to links. This CSS selector is often used to put a border-bottom on links when they are hovered over. A:hover ( border-bottom: 1pxsolidblack; ) border-bottom: 1px solid black; looks better than text-decoration: underline; Compatibility IE6+ (In IE6: hover must be applied to the link) Firefox Safari Opera 20. X:not(selector) div:not(#container) ( color: blue; ) The negation pseudo-class can be very useful. Let's say I want to select all divs except the one that has id = container . The above code will handle this! Or if I wanted to select all elements except p. *:not(p) ( color: green; ) Compatibility IE9+ Firefox Safari Opera 21. X::pseudoelement We can use pseudo elements to style fragments of elements, such as the first line, or the first letter. Keep in mind that they must be applied to block-level elements in order to take effect. A pseudo-element is specified by two colons: :: Select the first letter in the paragraph P::first-letter ( float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right:2px; ) This code will select all paragraphs, and in turn select the first letters in them and apply this style to them. Select the first line in a paragraph P::first-line ( font-weight: bold; font-size: 1.2em; ) Similarly, with ::first-line we style the first line in a paragraph. “For compatibility with existing style sheets, the browser must understand the previous single-colon pseudo-element designations introduced in CSS 1, 2 (:first-line, :first-letter, :before and:after). This compatibility is not allowed for new pseudo-elements introduced in this specification" Compatibility IE6+ Firefox Safari Opera 22. X:nth-child(n) li:nth-child(3) ( color: red; ) Previously, we could not select, for example, the third child element? nth-child solves this! Note that nth-child takes an integer as a parameter, but does not start from 0. If you want to select the second list item, use li:nth-child(2) . We can even select every fourth element of the list by simply writing (0)li:nth-child(4n)(/0). Compatibility IE9+ Firefox 3.5+ Safari 23. X:nth-last-child(n) li:nth-last-child(2) ( color: red; ) What if you have a huge list of elements in ul and you need to select the third element from the end? Instead of writing li:nth-child(397), you can use nth-last-child. This method is almost identical to the one above, but starts from the end. Compatibility IE9+ Firefox 3.5+ Safari Opera 24. X:nth-of-type(n) ul:nth-of-type(3) ( border: 1pxsolidblack; ) It happens that you need to select not a child element, but an element of a certain type. Imagine there are five unordered lists on a page. . If you want to style only the third ul that doesn't have a unique id, you need to use nth-of-type. Compatibility IE9+ Firefox 3.5+ Safari 25. X:nth-last-of-type(n) ul:nth-last-of-type(3) ( border: 1pxsolidblack; ) We can also use nth-last-of-type, counting elements from the end. Compatibility IE9+ Firefox 3.5+ Safari Opera 26. X:first-child ul li:first-child ( border-top: none; ) This pseudo-class selects the first child element. Often used to remove borders from the first and last element of a list. Compatibility IE7+ Firefox Safari Opera 27. X:last-child ul > li:last-child ( color: green; ) In contrast, :first-child:last-child selects the last child element. Compatibility IE9 + (Yes, yes, IE8 supports:first-child , but does not support:last-child . Hello Microsoft!) Firefox Safari Opera 28. X:only-child div p:only-child ( color: red; ) You don't see this pseudo-class very often, but it exists nonetheless. It allows you to select elements that are the only children. For example, apply the above style to this html code: One paragraph. Two paragraphs Two paragraphs Only p of the first div will be selected because it is the only child element. Compatibility IE9+ Firefox Safari Opera 29. X:only-of-type A very interesting pseudo-class. It affects elements that have no neighbors within the parent element. As an example, let's select a ul with only one element in the list. The only solution is to use only-of-type . Ul > li:only-of-type ( font-weight: bold; ) Compatibility IE9+ Firefox 3.5+ Safari Opera 30. X:first-of-type first-of-type selects the first element of the given type. To understand better, let's look at an example. Paragraph Paragraph 1 Point 2 Point 3 Point 4 Now try to understand how to highlight point 2. Solution 1 Ul:first-of-type > li:nth-child(2) ( font-weight: bold; ) Solution 2 P + ul li:last-child ( font-weight: bold; ) Solution 3 Ul:first-of-type li:nth-last-child(1) ( font-weight: bold; ) Compatibility IE9+ Firefox 3.5+ Safari Opera In the last lesson we looked at ways to include CSS. Now let's move on to the language itself. Like any other language, CSS has its own, but extremely simple syntax. Consists of only two components: 1. Selector(selecting the object we will work with. For example, title, div, table, etc.) 2. Style block- description of one or more properties of an object - color, size, etc. Consists in curly braces () We see how the title is a selector; in the style block, the text color property is assigned ( color) - blue. Style block comprises properties And their meanings, which are separated when enumerated semicolon (;), as in the example below. Now we're adding one more property - text formatting (font). In it we give meaning text size - 20 pixels. Example of CSS in action Create a folder anywhere, for example, lesson 2. Create a file in it style.css. Copy all the code below into it. In the CSS code we set properties for the tag and headings And . CSS Code(file style.css) Body( background: gray; color: white; } h1(color:#0085cc;) h2(color:white;) Please note that there will be no difference whether the style block is written in a line (h1,h2) or in a column (body). Both options will work. Choose what suits you best. Now let's create an HTML file. It doesn’t matter what the name is, the main thing is that the path to the file with the CSS code is specified correctly. Indicated in the same way as in links, paths to images. The example below shows the path (style.css) to the same directory as the html file. That is, both files must be in the same folder. HTML code Heading h1 Heading h2 The result of the code can be seen at the link below. CSS selectors In the examples above, the selectors were page elements: body, h1, h2. However, there are situations when you need to work with a specific element, and not with all. For example, all the headings were blue, and one at the end was black. There are different types of selectors for this. Let's take a closer look at them. Identifiers Item ID is a selector that is assigned to one element and makes it unique. Set using parameter id. This paragraph is assigned an id. It will have unique properties. The text options will remain at their defaults. Let's look at an example HTML and CSS code Text that will be blue because there is an id The text color will remain at its default. First, in the styles of all paragraphs, the color property is set to black, and the text of the paragraph with id "blue" will be blue. The selector in this case consists of an element (p - paragraph), a separator (# - identifier designation) and the identifier name (blue). It is important to note that in theory the identifier is given to only one element to which we want to give unique properties. Yes, in some browsers, giving the same ID to two elements may work. However, this will not happen everywhere. If you want to set styles for several elements, you should use classes. Classes Class is a selector that allows you to apply styles to one or more elements. For example, id only applies to one unique element. The value is the name of the element. Let's look at an example: HTML and CSS code Text color is black. Blue text. The text is bold and blue. Text color is black. The result is a paragraph with identifier ( id) blue will have blue text, elements with class blue will be highlighted in bold and blue. And all other elements p will have a black font. As you can see, the class can be applied several times. Accordingly, all elements will have the properties described for this class. Unified selectors Unified selectors (.) is a selector that can be assigned to different types of elements, for example, headings, paragraphs, and blocks (divs). The most common option. Previously, we used the construct in the CSS code p#blue And p.blue, that is, first they indicated the type of element (p - paragraph), and then the identifier or class itself. So you can specify the construction more simply, start right away with .blue. A similar selector will be applicable not only to paragraphs, but to other elements. HTML and CSS code Header with identifier. Text color is black. The text is bold and blue. The text in the block is also bold and blue The text in the inline element is also bold and blue The result is a unified selector, in this case class .blue, we applied to both a paragraph (p), a block (div), and a line element (span). The result is the same everywhere - the text is bold and blue. Context selectors Context selector is a selector that selects one element in a group of other elements. The spelling is marked with a space. To make it easier, let's move straight to an example. Let's say we want the bold text contained in paragraphs to be highlighted in some other color. HTML and CSS code Text color is black. But bold font tags are not mentioned here. Regular bold text, which is not contained in the paragraph. Therefore, its color does not change. And attention!!! Paragraph with a phrase bold blue font Accordingly, only the bold text (strong) that will be in paragraph (p) will be highlighted in blue. Grouping selectors Grouping selectors- this is a style sheet construction where the style declaration block addresses one or more previously mentioned elements and adds a new property. The text is difficult to understand. It’s better to take an example right away. H1, h2, h3( color:blue; ) h1(font-size:18px; ) h2(font-size:16px; ) h3(font-size:14px; ) In the first line we immediately mention several elements. In order to access several elements at once, you need to list them in the selector using the sign , (comma) and space. There is NO need for a comma or space before the last item to be enumerated.. By subsequent mentions of these elements, we add new property values ​​to them. In this case, font size. HTML and CSS code Heading h1 Heading h2 Heading h3 As a result, all headings will be blue. However, different sizes, because subsequent entries in the style sheet gave the headings different sizes. The use of grouping is a controversial issue. Among benefits It can be noted that it is possible to avoid large parts of the code, which will largely duplicate themselves in content. Among the disadvantages, we can say that using such code, where properties are added to one or another element in different places, is quite problematic and inconvenient. Of course, with proper sequential writing you can avoid such disadvantages, but that’s another question. Thank you for your attention! The lesson is over! Share on social networks! Rate this article: (1 ratings, on average: 5,00 out of 5) Loading... Useful articles Error: We were unable to configure Windows updates What to choose: MacBook Air or MacBook Pro? OnLine calculator QTH, WW locator, coordinates