გამარჯობა ძვირფასო მკითხველებო! ვაგრძელებ CSS სელექტორების თემას, მინდა თქვენი ყურადღება გავამახვილო ბავშვის აღწერა და კონტექსტის ამომრჩევლები, ისევე როგორც მათი შედარებითი ანალიზი, ვინაიდან მათი გამოყენების ლოგიკის მიხედვით ისინი ძალიან ჰგვანან ერთმანეთს, თუმცა მათ აქვთ გარკვეული განსხვავებები.

ჩემს პუბლიკაციებში მე დეტალურად ვისაუბრე CSS სელექციის სხვადასხვა ტიპზე :; ისევე, როგორც . სხვათა შორის, ბოლო სტატიაში, რომელიც სხვადასხვა ტიპის ატრიბუტების ამომრჩეველს ეხებოდა, მე დეტალურად აღვწერე, თუ როგორ შეიძლება ჩემი თეორიული გათვლების დაუყოვნებლივ შემოწმება HTML და CSS კოდის ონლაინ ცვლილებების შეტანით Google Chrome- ის ჩაშენებული ინსტრუმენტის გამოყენებით () რა ასეთი რედაქტირების ინსტრუმენტებს აქვთ ყველა პოპულარული ბრაუზერის უახლესი ცვლილებები, მათ შორის Firebox მოდული Firefox– ისთვის ().

თქვენ ასევე შეგიძლიათ შეისწავლოთ ამ პოსტის თეორიული მასალა ნებისმიერი საიტის ნებისმიერი გვერდის რედაქტირებით! ამისათვის უბრალოდ დააჭირეთ F12, თუ იყენებთ Google Chrome ან Mozilla Firefox (). ახლა კი წარმოგიდგენთ p ტეგის შინაარსს, რომლის მაგალითით ჩვენ შევისწავლით ბავშვი და კონტექსტური CSS სელექტორები:

ეს პუნქტი მოიცავს ფორმატირების tags em და ძლიერირომელიც ხაზს უსვამს ტექსტს თამამიდა დახრილად.

ზემოაღნიშნული რედაქტირების ინსტრუმენტის გამოყენებით, მე ჩავსვი ეს პარაგრაფი პირდაპირ ამ სტატიაში, შესაბამისი ტექსტის აკრეფისას რედაქტირების ფანჯრის მარცხენა მხარეს, რის შედეგადაც ამ აბზაცის ტექსტი გამოჩნდა გვერდის ზედა ნაწილში:

ეს HTML კონსტრუქცია ,. ეს პარაგრაფი ექსპერიმენტული იქნება დღევანდელ პუბლიკაციაში, მისი მაგალითის გამოყენებით მე ვაჩვენებ, თუ როგორ იცვლება მისი ტექსტის დიზაინი, იმისდა მიხედვით, თუ რომელი სელექტორი - ბავშვი თუ კონტექსტუალური - გამოიყენება CSS წესში.

ბავშვი არის ელემენტი, რომელიც მდებარეობს უშუალოდ მშობლის შიგნით... სანამ უშუალოდ თემას გავაგრძელებ, მე მივცემ სურათს, რომელიც ასახავს ტეგების იერარქიას HTML დოკუმენტში აბზაცის მაგალითის გამოყენებით, რომლის ტექსტი მოცემულია ზემოთ და რომელსაც დღეს გავაანალიზებთ:

ამ დიზაინს ასევე უწოდებენ ელემენტების ხეს. ეს ფიგურა ნათლად გვიჩვენებს კონტეინერების ბუდეს, რაც გულისხმობს იერარქიულ ურთიერთობას ტეგებს შორის. P პუნქტის ტეგი არის ურთიერთობის შვილი. ამავე დროს, ძლიერი ტეგი არ არის div- ის ბავშვი, რადგან ის მდებარეობს p კონტეინერში.

ბავშვის CSS სელექტორი

ელემენტის ხეში ბავშვის სელექტორი ყოველთვის უშუალოდ მშობლის ელემენტშია, ამ შემთხვევაში CSS ამომრჩევის დასაწერად სინტაქსი იქნება შემდეგი:

სტილი გამოყენებული იქნება სელექტორი 2 -ზე, მაგრამ მხოლოდ იმ შემთხვევაში, თუ ის არის ამომრჩეველი 1 -ის შვილი. მოდით უფრო დეტალურად დავანახოთ იგი ზემოთ მოცემული ეკრანის სურათის გამოყენებით ელემენტის ხესთან ერთად. მაგალითად, სინტაქსის შემდეგ, შეგიძლიათ დაადგინოთ ასეთი წესი:

P> em (ფერი: მწვანე;)

ეს წესი გავლენას მოახდენს აბზაცის ბოლო სიტყვაზე „კურსივით“, რადგან ის არის ის, რომელიც გახსნის და დახურავს em ტეგებს შორის. Em tag არის p- ის შვილი, რადგან ის მოთავსებულია უშუალოდ მის შიგნით, ამიტომ შინაარსის ტექსტი, კერძოდ სიტყვა "დახრილი", მწვანე ფერის იქნება.

თუმცა, სხვა em tag არ არის p tag- ის პირდაპირი შთამომავალი, რადგან ის არის ძლიერი tag- ის ნაწილი და შედეგად, აბზაცის "em და ძლიერი ფორმატირების tags" ნაწილი არ იქნება ფერადი.

კონტექსტური CSS ამომრჩევი

დროა გაერკვეს რა არის CSS კონტექსტის ამომრჩევი... საიტის კონკრეტული გვერდის კოდირებისას, ტეგები ძალიან ხშირად თავსდება ერთმანეთში. იმისათვის, რომ სტილი ასეთი ელემენტებისთვის სწორად იმუშაოს, გამოიყენება სელექტორები, რომლებიც მოქმედებენ გარკვეულ კონტექსტში, აქედან გამომდინარე სახელი.

თუ CSS- ის წესი გამოიყენება, ბავშვის სელექტორი აუცილებლად უნდა იყოს განლაგებული უშუალოდ მშობლის ელემენტის შიგნით (პირველი ბუდეების დონე), მაშინ კონტექსტის სელექტორისთვის ეს სრულიად უმნიშვნელოა და ბუდეების ნებისმიერი დონის გამოყენება შესაძლებელია, ერთი და იგივე ელემენტის თვისებები გადაეცემა მშობელს. ამ შემთხვევაში, სინტაქსი შემდეგია:

როგორც ხედავთ, კონტექსტის ამომრჩევი შედგება მარტივი სელექტორებისგან, რომლებიც გამოყოფილია სივრცეში. კონტექსტური ამომრჩევლებისთვის ნებადართულია ორი ან მეტი ჩადგმული ტეგის გამოყენება. ახლა მოდით შევადგინოთ CSS წესი ტესტის აბზაცისთვის, რომელიც ზემოთ მოვიყვანე:

P em (ფერი: მწვანე;)

როგორც ხედავთ, მწვანე არ არის მხოლოდ პარაგრაფის შინაარსის ნაწილის ტექსტი, რომელიც პირდაპირ არის ჩასმული em ფორმატირების ტეგში, ანუ სიტყვა "კურსივები", არამედ სხვა em ტეგის ტექსტური მონაკვეთი, რომელიც არის ასევე ძლიერი ნიშნის ნაწილი. ეს მოხდა იმიტომ, რომ მოქმედებს კონტექსტური ამომრჩევის წესი, რომლისთვისაც ბუდეების დონე არ არის მნიშვნელოვანი, განსხვავებით ბავშვის სელექტორისა. ეს არის ფუნდამენტური განსხვავება ბავშვებსა და კონტექსტის ამომრჩევლებს შორის.

მოდით შევხედოთ სხვა მაგალითს იმისა, თუ როგორ ურთიერთქმედებს კონტექსტური და ბავშვი სელექტორები ჩვენს პარაგრაფთან. მოდით დავწეროთ შემდეგი CSS წესები ბავშვისთვის და კონტექსტის ამომრჩევლები:

Div em (ფერი: წითელი;) p> em (ფერი: მწვანე;)

ამის შემდეგ, ჩვენი პუნქტი იძენს შემდეგ დიზაინს:

როგორც ხედავთ, em და ძლიერი ეტიკეტები ჩასმული ტექსტი წითლად არის შეღებილი, რადგან კონტექსტის ამომრჩევის წესი მოქმედებს მისთვის, ანუ em ტეგი მოთავსებულია ძლიერ და გამყოფი კონტეინერებში და ბუდეების დონე, როგორც უკვე აღნიშნა, არ აქვს მნიშვნელობა ...

ჩნდება კითხვა: რატომ არის სიტყვა "დახრილი", რომელიც ასევე ემ -ის შინაარსია, მწვანე ფერის? ყოველივე ამის შემდეგ, მისთვის, კონტექსტის ამორჩევის წესი აქტუალურია. მაგრამ აბზაცის ტექსტის ამ მონაკვეთისათვის ბავშვის შერჩევის წესი ასევე მართალია, რადგან ის არ ეწინააღმდეგება იმ პირობას, რომ ბავშვის სელექტორისთვის ელემენტი პირდაპირ უნდა იყოს p tag- ის ნაწილი.

ფაქტია, რომ CSS– ში უპირატესობის კანონი ვრცელდება ქვემოთ მოცემულ CSS თვისებებზე. ანუ, ამ შემთხვევაში, ბავშვის შერჩევის წესი არის დოკუმენტში უფრო დაბალი, ვიდრე div კონტეინერის კონტექსტური სელექტორისთვის დაწერილი CSS სტილები. ამიტომ, სიტყვა "დახრილი" მწვანე გახდა. თუ თქვენ შეცვლით მათ, მაშინ წესი "p> em (ფერი: მწვანე;)" წყვეტს მოქმედებას და ტექსტის ნაწილი "დახრილია" იქნება წითელი.

აღწერა

: Nth ბავშვის ფსევდოკლასი გამოიყენება ელემენტების სტილში ელემენტების ხეზე ნუმერაციის საფუძველზე.

Სინტაქსი

ელემენტი: nth-child (კენტი | ლუწი |<число> | <выражение>) {...}

ღირებულებები

უცნაური ყველა უცნაური ერთეულის ნომერი. კი ყველა ლუწი ელემენტის რიცხვი. ნომერი ბავშვის რიგითი ნომერი მშობელთან შედარებით. ნუმერაცია იწყება 1 -ით, ეს იქნება სიაში პირველი პუნქტი. გამოხატულება მითითებულია როგორც + b, სადაც a და b არის მთელი რიცხვი და n არის მრიცხველი, რომელიც ავტომატურად იღებს მნიშვნელობას 0, 1, 2 ...

თუ a არის ნულის ტოლი, მაშინ ის არ არის დაწერილი და ჩანაწერი შემოკლებულია b– მდე. თუ b უდრის ნულს, მაშინ ის ასევე არ არის მითითებული და გამოთქმა ჩაწერილია სახით a. a და b შეიძლება იყოს უარყოფითი რიცხვები, ამ შემთხვევაში პლუს ნიშანი იცვლება მინუსზე, მაგალითად: 5n-1.

A და b– ს უარყოფითი მნიშვნელობების გამოყენებით, ზოგიერთი შედეგი შეიძლება იყოს უარყოფითი ან ნულოვანი. თუმცა, ერთეულებზე გავლენას ახდენს მხოლოდ დადებითი მნიშვნელობები იმის გამო, რომ ერთეულების ნუმერაცია იწყება 1 -ით.

მაგიდა 1 ჩამოთვლის რამდენიმე შესაძლო გამონათქვამს და საკვანძო სიტყვას და ასევე მიუთითებს რომელი ერთეულის ნომრები იქნება გამოყენებული.

HTML5 CSS3 IE Cr Op Sa Fx

	2134	2135	2136	2137	2138
ზეთი	16	34	62	74	57
ოქრო	4	69	72	56	47
Ტყე	7	73	79	34	86
ქვები	23	34	88	53	103

ამ მაგალითში: nth ბავშვი ფსევდო კლასი გამოიყენება ცხრილის პირველი რიგის სტილის შესაცვლელად და ყველა ლუწი რიცხვიანი რიგების გასაფერადებლად (სურათი 1).

ბოლო განახლება: 21.04.2016

ფსევდო კლასების სპეციალური ჯგუფი იქმნება ფსევდო კლასებით, რაც საშუალებას გაძლევთ აირჩიოთ კონკრეტული ბავშვები:

: first-child: წარმოადგენს ელემენტს, რომელიც არის პირველი შვილი

: last-child: წარმოადგენს ელემენტს, რომელიც არის ბოლო შვილი

: only-child: წარმოადგენს ელემენტს, რომელიც არის ერთადერთი ბავშვი რომელიმე კონტეინერში

: only-of-type: ირჩევს ელემენტს, რომელიც არის კონკრეტული ტიპის (ტეგის) ერთადერთი ელემენტი რომელიმე კონტეინერში

: nth-child (n): წარმოადგენს ბავშვის ელემენტს, რომელსაც აქვს კონკრეტული რიცხვი n, მაგალითად მეორე შვილი

: nth-last-child (n): წარმოადგენს ბავშვის ელემენტს, რომელსაც აქვს კონკრეტული რიცხვი n, დაწყებული ბოლოდან

: nth-of-type (n): ირჩევს კონკრეტული ტიპის ბავშვს, რომელსაც აქვს კონკრეტული რიცხვი

: nth-last-of-type (n): ირჩევს კონკრეტული ტიპის ბავშვს, რომელსაც აქვს კონკრეტული რიცხვი ბოლოდან დაწყებული

პირველი შვილის ფსევდოკლასი

ჩვენ ვიყენებთ პირველი შვილის ფსევდო კლასს ბლოკებში პირველი ბმულების შესარჩევად:

ტაბლეტები

სმარტფონები

პასუხი: პირველი შვილი იწერება ბმულზე, თუ ის არის რომელიმე ელემენტის პირველი შვილი.

მეორე ბლოკში კი პირველი ელემენტია აბზაცი, ასე რომ არცერთი ბმული არ არის სტილიზებული.

ბოლო ბავშვის ფსევდოკლასი

ჩვენ ვიყენებთ ბოლო ბავშვის ფსევდო კლასს:

სმარტფონები

ტაბლეტები

A: last-child სელექტორი განსაზღვრავს სტილს იმ ბმულებისთვის, რომლებიც ბოლო ბავშვები არიან.

პირველ ბლოკში ბმული არის ბოლო ბავშვის ელემენტი. მეორეში, ბოლო ბავშვი არის აბზაცი, ამიტომ მეორე ბლოკში სტილი არ გამოიყენება არცერთ ბმულზე.

მხოლოდ ბავშვის სელექტორი

: მხოლოდ ბავშვის სელექტორი ირჩევს ელემენტებს, რომლებიც მხოლოდ ბავშვები არიან კონტეინერებში:

სათაური

აბზაცები ტექსტებით "ტექსტი 1" და "ტექსტი 4" ერთადერთი ბავშვები არიან მათ გარე კონტეინერებში, ამიტომ ისინი სტილიზებულია წითელი შრიფტის ფერით.

ერთადერთი ტიპის ფსევდოკლასი

ერთადერთი ტიპის ფსევდო კლასი ირჩევს ელემენტს, რომელიც არის კონტეინერში კონკრეტული ტიპის ერთადერთი ელემენტი. მაგალითად, ერთი div ელემენტი, მაშინ როდესაც ერთი და იმავე კონტეინერში შეიძლება იყოს სხვა ტიპის იმდენივე ელემენტი.

ერთიანი აბზაცი და სპანის ელემენტი

მიუხედავად იმისა, რომ არსებობს სტილი, რომელიც განსაზღვრულია div ელემენტებისთვის, ის არ იქნება გამოყენებული, რადგან სხეულის კონტეინერში არის ორი div და არა ერთი. მაგრამ სხეულში მხოლოდ ერთი p ელემენტია, ასე რომ ის სტილიზდება. ასევე არსებობს მხოლოდ ერთი ელემენტის ელემენტი p კონტეინერში, ასე რომ ის ასევე სტილიზებული იქნება.

მე -3 ბავშვის ფსევდოკლასი

მე -3 ბავშვის ფსევდოკლასი საშუალებას გაძლევთ მოაწყოთ სტილი ყოველი მეორე, მესამე ელემენტი, მხოლოდ ლუწი ან მხოლოდ კენტი ელემენტები და ა.

მაგალითად, მოდით შევქმნათ ცხრილის ლუწი და კენტი რიგები:

სმარტფონები

Samsung	Galaxy S7 Edge	60000
ვაშლი	iPhone SE	39000
Microsoft	ლუმია 650	13500
ალკატელი	კერპი S4	30000
Huawei	P9	60000
HTC	HTC 10	50000
მეიზუ	პრო 6	40000
Xiaomi	Mi5	35000

უცნაური ელემენტების სტილის განსაზღვრისათვის მნიშვნელობა "უცნაური" გადადის ამომრჩეველზე:

Tr: nth-child (კენტი) ()

ელემენტების შესაქმნელად, მნიშვნელობა "კი" გადადის ამომრჩეველზე:

Tr: nth-child (თუნდაც) ()

ჩვენ ასევე შეგვიძლია გადავიტანოთ სტილირების ელემენტის ნომერი ამ ამომრჩეველს:

Tr: nth-child (3) (ფონის ფერი: #bbb;)

ამ შემთხვევაში, მესამე ხაზი იქმნება.

კიდევ ერთი შესაძლებლობა არის რიცხვისთვის ადგილის გამოყენება, რომელიც გამოიხატება n ასოთი:

Tr: nth-child (2n + 1) (ფონის ფერი: #bbb;)

აქ სტილი გამოიყენება ყოველ მეორე უცნაურ ხაზზე.

N– მდე რიცხვი (ამ შემთხვევაში 2) წარმოადგენს მომდევნო ბავშვს, რომელიც გამოჩნდება. რიცხვი, რომელიც მოყვება პლუს ნიშანს, მიუთითებს რომელი ელემენტიდან უნდა დაიწყოთ შერჩევა, ანუ +1 ნიშნავს პირველი ბავშვის ელემენტიდან დაწყებას.

ამრიგად, ამ შემთხვევაში, შერჩევა იწყება 1 -ლი ელემენტით, ხოლო შემდეგი არის 2 * 1 + 1 = მე -3 ელემენტი, შემდეგ 2 * 2 + 1 = მე -5 ელემენტი და ასე შემდეგ.

მაგალითად, თუ ჩვენ გვსურს თითოეული მესამე ელემენტის შერჩევა მეორედან, მაშინ შეგვიძლია დავწეროთ:

Tr: nth-child (3n + 2) (ფონის ფერი: #bbb;)

მე -6-ბოლო ბავშვის ფსევდო კლასი არსებითად უზრუნველყოფს ერთსა და იმავე ფუნქციურობას, გარდა იმისა, რომ ელემენტები არ არის დათვლილი თავიდან, არამედ ბოლოდან:

Tr: nth-last-child (2) (ფონის ფერი: #bbb; / * 2 სტრიქონი ბოლოდან, ანუ, უწინდელი * /) tr: nth-last-child (2n + 1) (ფონის ფერი : #eee; / * კენტი ხაზები დაწყებული ბოლოდან * /)

მე -9 ტიპის ფსევდოკლასი

: Nth-type ტიპის ფსევდო კლასი საშუალებას გაძლევთ აირჩიოთ კონკრეტული ტიპის ბავშვი კონკრეტული რიცხვით:

Tr: nth-of-type (2) (ფონის ფერი: #bbb;)

მეექვსე-ბოლო ტიპის ფსევდო კლასი მუშაობს ანალოგიურად, მხოლოდ ახლა ელემენტები ითვლება ბოლოდან:

Tr: nth-last-of-type (2n) (ფონის ფერი: #bbb;)

მე ვფიქრობ, რომ ბევრმა იცის ამის შესახებ კონტექსტური ამომრჩევლები CSS– ში... ისინი ყველაზე ხშირად გამოიყენება, თუმცა, განლაგების გამოცდილმა დიზაინერებმა კარგად იციან, რომ ზოგჯერ კონტექსტური ამომრჩევლები გარკვეულ პრობლემებს უქმნიან. ეს პრობლემა უკავშირდება იმ ფაქტს, რომ ელემენტის სტრუქტურაში შეიძლება იყოს მრავალი იდენტური ელემენტი, რომელიც ერთმანეთშია ჩასმული. და აუცილებელია სტილის გამოყენება არა ყველა ჩადგმულ ელემენტზე, არამედ მხოლოდ უშუალოდ ბავშვის ელემენტზე. ეს არის ის, რასაც ისინი ამისათვის იყენებენ. ბავშვის შერჩევა CSS– ში.

პრობლემის გასარკვევად, მოვიყვანოთ მცირე მაგალითი. მოდით გვქონდეს ასეთი HTML კოდი:

და ჩვენი ამოცანაა მხოლოდ წითელი გავხადოთ " მეორე აბზაცი". თუ ჩვენ ვწერთ კონტექსტის ამომრჩევლის გამოყენებით:

კონტეინერი p (
ფერი: წითელი;
}

შემდეგ ორივე პარაგრაფი გახდება წითელი, რაც ჩვენ საერთოდ არ გვჭირდება. ამ ამოცანის ამოხსნა ძალიან ადვილია გამოყენებით ბავშვის შერჩევა CSS– ში:

კონტეინერი> p (
ფერი: წითელი;
}

ყველაფერი, ახლა ჩვენ მხოლოდ გავხდით წითლები " მეორე აბზაცი". ვინაიდან ეს კონკრეტული პუნქტი პირდაპირ არის ბავშვის .კონტეინერი... მაგრამ " პირველი აბზაცი"შინაგანი შვილია divამდენად, ის არ მოხვდება ბავშვის სელექტორის გავლენის ქვეშ.

ასე მარტივად წყდება ასეთი ამოცანები, თუმცა არის ერთი უზარმაზარი მინუსი. ბავშვის შერჩევა CSS– ში- ისინი არ მუშაობენ ბრაუზერებში Internet Explorer... ამ მიზეზით, მათი გამოყენება ძალზე არასასურველია. მაგრამ თუ თქვენ მოულოდნელად შეხვდით სადმე, მაშინ ახლა თქვენ იცით, რას ნიშნავს ამ ტიპის სელექტორი და რას აკეთებს იგი.

ამომრჩევლის მთავარი მიზანი გამომდინარეობს მისი სახელიდან და არის ბავშვის ელემენტის მითითება. ის ნაჩვენებია მარტივი ">" ნიშნის გამოყენებით, რომელიც ბავშვის ელემენტს უკავშირებს მშობლის ელემენტს. აღსანიშნავია ისიც, რომ ზარი იყენებს მარტივ სელექტორებს. მაგალითისთვის განვიხილოთ შემდეგი კოდირება:

Element> ul (padding-top: 20px;)

ეს კოდირება ნიშნავს, რომ სია, რომელიც ელემენტშია ჩადგმული, დაიდება 20 პიქსელი ზემოდან. ამ ჩანაწერში ">" ხატის არსებობა მიუთითებს იმაზე, რომ წესი ვრცელდება მხოლოდ პირველი ბუდეების დონის სიებზე.

დეტალური ანალიზი, თუ როგორ მუშაობს ბავშვის სელექტორი

ბავშვის ელემენტის სელექტორს აქვს ისეთი თვისებები, როგორიც არის ბავშვის სელექტორი. ამასთან, არსებობს დამახასიათებელი თვისება, რომელიც აჩვენებს ფუნდამენტურ განსხვავებას ამ ოპერაციებს შორის. ის მდგომარეობს იმაში, რომ შთამომავალი სელექტორის გავლენა ვრცელდება აბსოლუტურად ყველა ელემენტზე, ხოლო ბავშვი სელექტორი ემორჩილება კლასიფიკაციის პირველი დონის პოზიციების სტილს.

შემდეგი მაგალითი დაგეხმარებათ უფრო მკაფიოდ შეაფასოთ ბავშვის სელექტორის ოპერატორის მოქმედება:

Div> p (ფერი: # ff0000; / * წითელი * /)

< div>ამ ხაზს ნაგულისხმევად ექნება შავი ტექსტი.< span>ეს ხაზი წითლდება, რადგან p არის ბავშვის ტეგი div- ისთვის. < p>ჩვენ კვლავ ვხედავთ შავ ასოებს.< span>აქ ჩვენ ასევე ვხედავთ შავ სიმბოლოებს, რადგან ამ პერიოდისათვის მშობელი არის p ტეგი.

ეს მაგალითი ადასტურებს ბავშვის შერჩევის ოპერატორის მუშაობას ბუდეს დონის მიხედვით.

ბავშვის სელექტორის ოპერატორის გამოყენების შეზღუდვა

აღსანიშნავია, რომ ამ ოპერაციას მხარს უჭერს ყველა ბრაუზერი, ლეგენდარული Internet Explorer 6. გარდა მე ვფიქრობ, რომ ძალიან ცოტა ადამიანი იყენებს ამ ბრაუზერს, მაგრამ თუ არსებობს უნიკალური, მაშინ არის გამოსავალი მათთვის არსებული მდგომარეობიდან, რომელიც იქნება აღწერილია ცალკეულ სტატიაში.

რატომ გამოიყენება

პროგრამისტები მიმართავენ ბავშვის ელემენტების ამომრჩევლებს, როდესაც მათ სჭირდებათ მიანიჭონ თავიანთი უნიკალური სტილი ჩადგმულ ელემენტებს. ასევე, ამ სელექტორის გამოყენებით შეიძლება შემცირდეს CSS- ის რაოდენობა, რაც გაზრდის დოკუმენტის წაკითხვას. როგორც პრაქტიკა გვიჩვენებს, ამ ოპერაციას ყველაზე ხშირად მიმართავენ ჩამოსაშლელი მენიუს შექმნისას.

ასევე, ბავშვის ელემენტის სელექტორი გამოიყენება უნიკალური სტილების მინიჭებისთვის იმ ელემენტებზე, რომელთა მშობლები უკვე ცნობილია წარსულში. Სხვა სიტყვებით:

მთავარი> სათაური ( / * სტილისტიკა ვრცელდება მხოლოდ მთავარ სათაურზე * / }

ეს მაგალითი მართალია იმ შემთხვევებში, როდესაც სათაურის ტეგი გამოიყენება სტატიების სათაურების ხაზგასასმელად. ჩვენს შემთხვევაში, ჩვენ ვადგენთ დიზაინს მხოლოდ მთავარი სათაურისთვის და არ ვმოქმედებთ მეორადზე. ეს ტექნიკა ასევე თავს არიდებს იდენტიფიკატორების არასაჭირო გამოყენებას, რაც, თავის მხრივ, CSS ფაილს უფრო მსუბუქს და წაკითხულს ხდის.

შეჯამება

ამრიგად, ბავშვის ელემენტის ოპერატორი შეიძლება გამოყენებულ იქნას არა მხოლოდ ჩამოსაშლელი მენიუს შესაქმნელად, არამედ თქვენი ინტერნეტ რესურსის ოდნავ ოპტიმიზაციისთვის საძიებო რობოტების მუშაობისთვის.