A CSS document description language is constantly evolving. Over time, not only its power and functionality grow, its flexibility and usability also increase.
CSS selectors
Let's get it right. Open any CSS tutorial, at least one section in it will be devoted to types 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 elements. Now there are 7 types of selectors:
- for interacting with pseudo-classes;
- to control pseudo-elements.
. CSS selectors, . ? .
, . , . , «» <header>. CSS header {}.
- , .
- . header. ?
. class. , <div>, . ? CSS selectors , . . . , div class=’red’, – class=’blue’, – class=’green’. , CSS.
: («.»), . , .red. – .blue .
! class. (, krasiviy-blok) / (ojfh834871). , , , . – - , .
- .
- , , . , . less, sass - , .
ID
. CSS ID, . . . : («#»), . , #red.
ID . -, ID. . -, . , red CSS , id blue , .
- , .
- ID class.
! ( ), ID , -, . , .
: («*») , . . *{}.
. ? , box-sizing: border-box. , , , div *{}.
- .
- . , .
. , input type. – text, – password, – number. , ID, . CSS selectors . , :
input[type=’text’]{}
input text.
, , . ! CSS !
, input placeholder=“ “ input placeholder=“ “. ! :
input[placeholder=“ “]{} input [placeholder=“ “]
. , title (, «» «»). , :
[title*=““]
CSS , «», . . «», «».
, :
[title^=" "] {}
:
[title$=" "] {}.
- . .
- , . , , «». , Internet Explorer 7 . , Internet Explorer?
. , :hover – , , :visited – . :first-child :last-child.
, «» JavaScript. , , btn . :
.btn:hover {
background-color: red;
}
transition, , 0,5s – , .
- «» . .
- . . . .
«» – , HTML, . ? , . , , . , span , . ::first-letter. .
. . .
- .
- . .
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 existing only conditionally). Be sure to learn all the options available, or at least write them down. This is especially important if you create complex pages with a modern design and lots of interactive elements.