რა არ იცოდით CSS სელექტორების შესახებ? CSS: Related Selectors (~) სათაური მოცემულ კლასთან

აღწერა

დაკავშირებული სელექტორები ქცევით მსგავსია მიმდებარე სელექტორებთან (ფორმის აღნიშვნა E + F), მაგრამ მათგან განსხვავებით, სტილის წესები ვრცელდება ყველა მიმდებარე ელემენტზე. მაგალითად, სელექტორისთვის h1~p სტილი გამოყენებული იქნება ყველა ელემენტზე

სათაურის შემდეგ მდებარეობს

. ამავე დროს

და

უნდა ჰყავდეს საერთო მშობელი, ასე რომ, თუ

ჩასვით შიგნით

, მაშინ სტილები აღარ იქნება გამოყენებული.

აქ ტექსტის ფერი დაყენდება წითლად ყველა აბზაცისთვის.

H1 ~ p (ფერი: წითელი;)

სათაური

პუნქტი 1

მე-2 პუნქტი

აქ ტექსტის ფერი დაყენდება წითლად პირველი და მესამე აბზაცებისთვის. მეორე აბზაცი არ არის სტილიზებული იმიტომ

და

მათ საერთო მშობელი არ ჰყავთ.

H1 ~ p (ფერი: წითელი;)

სათაური

პუნქტი 1

მე-2 პუნქტი

მე-3 პუნქტი

სინტაქსი

E ~ F (სტილის წესების აღწერა)

ტილდის სიმბოლო (~) გამოიყენება და-ძმის ელემენტების სტილის გასაკონტროლებლად და ემატება ორ ამომრჩეველს E და F შორის. ტილდის ირგვლივ სივრცეები არჩევითია. ეს სტილი გამოიყენება F ელემენტზე, თუ მას აქვს იგივე მშობელი, რაც ელემენტს E და დაუყოვნებლივ მიჰყვება მას.

HTML5 CSS3 IE Cr Op Sa Fx

სელექტორები

ამ მაგალითში, ყველა სურათი თავდაპირველად დამალულია, მაგრამ გამოჩნდება, თუ შეამოწმებთ ფორმის ველს.

კარგი დღე ყველას. ალექსეი გულინინი დაუკავშირდა. ამ სტატიაში მინდა გითხრათ რა არის ახალი სელექტორები გამოჩნდა CSS3-ში. დაუყოვნებლივ აღვნიშნავ, რომ ყველა ძველი სელექტორი (ტეგი, კლასი, id, ფსევდო სელექტორი) ასევე რჩება. ახალი სელექტორების მოსვლასთან ერთად, განლაგების დიზაინერის მუშაობა მნიშვნელოვნად გამარტივდა, რადგან ახლა რაღაცის გასაკეთებლად, არ არის საჭირო ბორბლის ხელახლა გამოგონება და სხვა ყავარჯნის გამოგონება. მოდით შევქმნათ HTML გვერდი, რომელზეც შევამოწმებთ ახალ სელექტორებს:

ახალი CSS3 სელექტორები

ბლოკი 1: ტექსტი, ტექსტი, ტექსტი

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

Ul li:first-child (ფონი: წითელი;)

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

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

Ul li: last-child (ფონი: მწვანე; )

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

nth-child() სელექტორი, რომლის პარამეტრებში უნდა გადაიტანოთ ელემენტი, რომელზეც გსურთ სტილის გამოყენება:

Ul li:nth-child(2) (ფონი:ყვითელი;)

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

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

::შერჩევა (ფონი: ვარდისფერი; ფერი: ყავისფერი; )

ჩაწერეთ ეს მაგალითი და შეეცადეთ აირჩიოთ რაიმე (შერჩევის ფერი უნდა შეიცვალოს).

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

Div (ფონი: #4c4c4c; )

"^=" კონსტრუქცია ნიშნავს, რომ id (ჩვენს შემთხვევაში) უნდა იწყებოდეს "te". გაუშვით ეს მაგალითი და ნახეთ შედეგი. შემდეგი კონსტრუქციის გამოყენებით, შეგიძლიათ აირჩიოთ ელემენტები, რომლებიც მთავრდება რაღაც კონკრეტულით. ვთქვათ, გვაქვს სურათები გვერდზე jpeg და png ფორმატში. ჩვენ გვინდა დავამატოთ ჩარჩო ყველა სურათს png ფორმატში. ეს კეთდება შემდეგნაირად.

// echo get_the_post_thumbnail(get_the_ID(), "relatedthumbnail"); // აჩვენე ჩემი ესკიზის ზომა?>

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

1. * - ყველა ელემენტის შერჩევა

* ( ზღვარი: 0; ბალიშები: 0; )

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

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

#container * ( საზღვარი: 1px მყარი შავი; )

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

თავსებადობა

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • ოპერა

2. #X

#container (სიგანე: 960px; ზღვარი: ავტომატური; )

ჰეშის ნიშანი CSS ამომრჩევის წინ გამოყოფს ელემენტს id="container"-ით. ეს ძალიან მარტივია, მაგრამ ფრთხილად იყავით ID-ის გამოყენებისას.

ჰკითხეთ საკუთარ თავს: მე ნამდვილად მჭირდება ხაზგასმა id-ით?

id მნიშვნელობები მჭიდროდ ბლოკავს სტილს ელემენტზე და არ არის ხელახლა გამოყენებადი. სასურველია გამოიყენოთ class="" კლასები, ტეგების სახელები ან თუნდაც ფსევდოკლასები.

თავსებადობა

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • ოპერა

3.X

შეცდომა (ფერი: წითელი;)

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

თავსებადობა

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Chrome

4. Xი

li a (ტექსტი-დეკორაცია: არცერთი;)

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

თქვენ არ უნდა გააკეთოთ CSS სელექტორები, როგორიცაა X Y Z A B.შეცდომა . ყოველთვის ჰკითხეთ საკუთარ თავს, საჭიროა თუ არა დაწეროთ ასეთი უხერხული CSS სელექტორი მოცემული ელემენტის ხაზგასასმელად.

თავსებადობა

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Chrome

5.X

a (ფერი: წითელი;) ul (ზღვარი მარცხნივ: 0;)

რა მოხდება, თუ გსურთ დაფაროთ მოცემული ტიპის ყველა ელემენტი გვერდზე? შეინახეთ მარტივი, გამოიყენეთ CSS ტიპის სელექტორი. თუ თქვენ უნდა მონიშნოთ ყველა შეურიგებელი სია, გამოიყენეთ ul()

თავსებადობა

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • ოპერა
a:link (ფერი: წითელი;) a:visted (ფერი: იასამნისფერი;)

ჩვენ ვიყენებთ ფსევდო-კლასი:ბმულს, რათა გამოვყოთ ყველა ის ბმული, რომელზეც ჯერ არ არის დაწკაპუნებული.

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

თავსებადობა

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • ოპერა

7. X+Y

ul + p (ფერი: წითელი;)

ირჩევს შემდეგ ელემენტს. ის აირჩევს მხოლოდ Y ტიპის ელემენტი, რომელიც მოდის X ელემენტის შემდეგ მაგალითში, პირველი აბზაცის ტექსტი ყოველი ul-ის შემდეგ იქნება წითელი.

თავსებადობა

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Chrome

8. X>Y

div#container > ul (საზღვარი: 1pxsolidblack;)

განსხვავება სტანდარტულ X Y-სა და X > Y-ს შორის არის ის, რომ მოცემული CSS სელექტორი შეარჩევს მხოლოდ უშუალო შვილობილ ელემენტებს. მაგალითად, განიხილეთ შემდეგი კოდი.

  • სიის ელემენტი
    • ბავშვის ელემენტი
  • სიის ელემენტი
  • სიის ელემენტი
  • სიის ელემენტი

CSS სელექტორი #container > ul შეარჩევს მხოლოდ ul-ებს, რომლებიც არიან div-ის უშუალო შვილები id =container-ით. ის არ შეარჩევს, მაგალითად, ul-ებს, რომლებიც პირველი ლი ს-ის შვილები არიან.

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

თავსებადობა

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • ოპერა

9. X~Y

ul ~ p (ფერი: წითელი;)

ეს CSS სელექტორი ძალიან ჰგავს X+Y-ს, თუმცა ნაკლებად შემზღუდველია. ul + p-ის გამოყენებით აირჩევს მხოლოდ პირველ ელემენტს X-ის შემდეგ. ამ შემთხვევაში, ყველა p ელემენტი, რომელიც მიდის ul-ზე, შეირჩევა.

თავსებადობა

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • ოპერა

10. X

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

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

თავსებადობა

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • ოპერა

11. X

a (ფერი: #ffde00;)

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

კარგი წესია, მაგრამ ძალიან მკაცრი. რა უნდა გააკეთოს, თუ ბმული პირდაპირ არ მიდის yandex.ru-ზე, მაგრამ მაგალითად http://yandex.ru/page1-ზე? ამ შემთხვევებში შეგვიძლია გამოვიყენოთ რეგულარული გამონათქვამები.

თავსებადობა

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Chrome

12. X

a (ფერი: #1f6053; )

ეს არის ის, რაც ჩვენ გვჭირდება. ვარსკვლავი მიუთითებს, რომ უნდა გამოჩნდეს მნიშვნელობა, რომელსაც ეძებთ სადღაცატრიბუტში. ასე რომ, CSS სელექტორი მოიცავს yandex.ru, http://yandex.ru/somepageდა ა.შ.

თავსებადობა

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • ოპერა

13. X

a ( ფონი: url(path/to/external/icon.png) განმეორების გარეშე; padding-left: 10px; )

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

"^" არის ყველაზე ხშირად გამოყენებული სიმბოლო რეგულარულ გამონათქვამებში. იგი გამოიყენება ხაზის დასაწყისის აღსანიშნავად. თუ გვინდა დავფაროთ ყველა ტეგი, რომლის href იწყება http-ით, უნდა გამოვიყენოთ ზემოთ მოცემული CSS სელექტორი.

გაითვალისწინეთ, რომ ჩვენ არ ვეძებთ "http://". ეს არ არის სწორი, რადგან https://-ით დაწყებული მისამართები არ არის გათვალისწინებული

რა მოხდება, თუ გვსურს სტილის დაყენება მხოლოდ ფოტომდე მიმავალი ბმულებისთვის? საჭიროა ძებნა დასასრულიხაზები.

თავსებადობა

  • IE7+
  • Firefox
  • Safari
  • ოპერა

14. X

a (ფერი: წითელი;)

კვლავ ვიყენებთ რეგულარული გამოხატვის სიმბოლოს "$" ხაზის დასასრულის აღსანიშნავად. ამ ერთში, ჩვენ ვეძებთ ბმულებს, რომლებიც ეხება jpg ფაილებს, ან url-ებს, რომლებსაც აქვთ „.jpg“ ბოლოს.

თავსებადობა

  • IE7+
  • Firefox
  • Safari
  • ოპერა

15. X

a (ფერი: წითელი;)

როგორ შეგვიძლია ახლა დავწეროთ CSS სელექტორი, რომელიც ხაზს უსვამს ბმულებს ყველა ტიპის სურათზე? მაგალითად, შეგვიძლია დავწეროთ ასე:

A, a, a, a (ფერი: წითელი;)

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

სურათის ბმული

A (ფერი: წითელი;)

თავსებადობა

  • IE7+
  • Firefox
  • Safari
  • ოპერა

16. X

a (ფერი: წითელი;) a (საზღვარი: 1pxსოლიდშავი;)

აი რაღაც განსაკუთრებული. ყველამ არ იცის ამ CSS სელექტორის შესახებ. ტილდი (~) საშუალებას გაძლევთ მონიშნოთ კონკრეტული ატრიბუტი მძიმით გამოყოფილი ატრიბუტების სიიდან.

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

"დააჭირე მე

აქ Html კოდი ადგილზეა, ახლა მოდით დავწეროთ სტილები.

ცუდი არ არის, არა?

თავსებადობა

  • IE7+
  • Firefox
  • Safari
  • ოპერა

17. X:შემოწმებულია

შეყვანა: შემოწმებული (კონტური: 1pxsolidblack;)

ეს ფსევდო-კლასი ხაზს უსვამს მხოლოდ ინტერფეისის ელემენტებს, როგორიცაა რადიო ღილაკი ან ჩამრთველი. უფრო მეტიც, ისინი, რომლებიც მონიშნულია/შერჩეულია. ძალიან მარტივი.

თავსებადობა

  • IE9+
  • Firefox
  • Safari
  • ოპერა

18. X: შემდეგ

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

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

Clearfix:after ( შინაარსი: ""; ჩვენება: დაბლოკვა; წმინდა: ორივე; ხილვადობა: დამალული; შრიფტის ზომა: 0; სიმაღლე: 0; ) .clearfix ( *display: inline-block; _height: 1%; )

ეს გატეხვაიყენებს: შემდეგ ელემენტის შემდეგ სივრცის დამატება და მისი შეფუთვის თავიდან აცილება.

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

თავსებადობა

  • IE8+
  • Firefox
  • Safari
  • ოპერა

19. X: hover

div:hover (ფონი: #e3e3e3;)

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

გაითვალისწინეთ, რომ Internet Explorer-ის ძველი ვერსიები ვრცელდება მხოლოდ ბმულებზე: hover.

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

A: hover (საზღვარი-ქვედა: 1pxsolidშავი;)

საზღვარი-ქვედა: 1px მყარი შავი; ტექსტის დეკორაციაზე უკეთ გამოიყურება: ხაზგასმა;

თავსებადობა

  • IE6+ (IE6-ში: hover უნდა იყოს გამოყენებული ბმულზე)
  • Firefox
  • Safari
  • ოპერა

20. X:არა (ამრჩევი)

div:not(#container) (ფერი: ლურჯი;)

უარყოფის ფსევდოკლასი შეიძლება ძალიან სასარგებლო იყოს. ვთქვათ, მინდა ავირჩიო ყველა div-ის გარდა, რომელსაც აქვს id = კონტეინერი. ზემოთ მოყვანილი კოდი გაუმკლავდება ამას!

ან თუ მინდოდა ყველა ელემენტის არჩევა პ-ის გარდა.

*:not(p) (ფერი: მწვანე;)

თავსებადობა

  • IE9+
  • Firefox
  • Safari
  • ოპერა

21. X::ფსევდოელემენტი

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

ფსევდოელემენტი მითითებულია ორი ორწერტილით: ::

აირჩიეთ პირველი ასო აბზაცში

P::პირველი ასო (მოძრავი: მარცხნივ; შრიფტის ზომა: 2em; შრიფტის წონა: თამამი; font-family: cursive; padding-right: 2px; )

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

აირჩიეთ პირველი ხაზი აბზაცში

P::პირველი ხაზი (შრიფტის წონა: თამამი; შრიფტის ზომა: 1.2em; )

ანალოგიურად, ::first-line-ით ჩვენ ვანიჭებთ სტილს აბზაცის პირველ სტრიქონში.

არსებული სტილის ცხრილებთან თავსებადობისთვის, ბრაუზერმა უნდა გაიგოს CSS 1, 2-ში შემოღებული წინა ერთწერტილიანი ფსევდოელემენტის აღნიშვნები (:first-line, :first-letter, :fore და:after). ეს თავსებადობა დაუშვებელია ამ სპეციფიკაციაში დანერგილი ახალი ფსევდოელემენტებისთვის"

თავსებადობა

  • IE6+
  • Firefox
  • Safari
  • ოპერა

22. X:nth-child(n)

li:nth-child(3) (ფერი: წითელი;)

ადრე, მაგალითად, მესამე შვილი ელემენტის არჩევა არ შეგვეძლო? n-ე ბავშვი წყვეტს ამას!

გაითვალისწინეთ, რომ nth-child იღებს მთელ რიცხვს პარამეტრად, მაგრამ არ იწყება 0-დან. თუ გსურთ აირჩიოთ სიის მეორე ელემენტი, გამოიყენეთ li:nth-child(2) .

ჩვენ შეგვიძლია შევარჩიოთ სიის ყოველი მეოთხე ელემენტი უბრალოდ ჩაწერით (0)li:nth-child(4n)(/0).

თავსებადობა

  • IE9+
  • Firefox 3.5+
  • Safari

23. X:nth-last-child(n)

li:nth-last-child(2) (ფერი: წითელი;)

რა მოხდება, თუ თქვენ გაქვთ ელემენტების უზარმაზარი სია ul-ში და თქვენ უნდა აირჩიოთ მესამე ელემენტი ბოლოდან? იმის ნაცვლად, რომ დაწეროთ li:nth-child(397), შეგიძლიათ გამოიყენოთ nth-last-child.

ეს მეთოდი თითქმის იდენტურია ზემოთ აღწერილი, მაგრამ იწყება ბოლოდან.

თავსებადობა

  • IE9+
  • Firefox 3.5+
  • Safari
  • ოპერა

24. X:nth-of-typ(n)

ul: nth-of-typ(3) ( კონტური: 1pxsolidშავი; )

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

წარმოიდგინეთ, რომ გვერდზე არის ხუთი შეურიგებელი სია. . თუ გსურთ დააყენოთ მხოლოდ მესამე ul, რომელსაც არ აქვს უნიკალური ID, უნდა გამოიყენოთ nth-of-type.

თავსებადობა

  • IE9+
  • Firefox 3.5+
  • Safari

25. X:nth-Last-of-typ(n)

ul: nth-last-of-typ (3) ( კონტური: 1pxsolidშავი; )

ჩვენ ასევე შეგვიძლია გამოვიყენოთ nth-last-of-typ, ელემენტების დათვლა ბოლოდან.

თავსებადობა

  • IE9+
  • Firefox 3.5+
  • Safari
  • ოპერა

26. X: პირველი შვილი

ul li:first-child (საზღვარი-ზემოდან: არცერთი;)

ეს ფსევდოკლასი ირჩევს პირველი შვილი ელემენტს. ხშირად გამოიყენება საზღვრების ამოსაღებად სიის პირველი და ბოლო ელემენტიდან.

თავსებადობა

  • IE7+
  • Firefox
  • Safari
  • ოპერა

27. X:ბოლო შვილი

ul > li: last-child (ფერი: მწვანე; )

ამის საპირისპიროდ, :first-child:last-child ირჩევს ბოლო ბავშვის ელემენტს.

თავსებადობა

  • IE9 + (დიახ, დიახ, IE8 მხარს უჭერს:first-child , მაგრამ არ უჭერს მხარს:last-child. გამარჯობა Microsoft!)
  • Firefox
  • Safari
  • ოპერა

28. X:მხოლოდ შვილი

div p:only-child (ფერი: წითელი;)

ამ ფსევდოკლასს ხშირად ვერ ნახავ, მაგრამ ის მაინც არსებობს.

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

ერთი აბზაცი.

ორი აბზაცი

ორი აბზაცი

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

თავსებადობა

  • IE9+
  • Firefox
  • Safari
  • ოპერა

29. X: მხოლოდ ტიპის

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

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

Ul > li:only-of-type (შრიფტის წონა: თამამი;)

თავსებადობა

  • IE9+
  • Firefox 3.5+
  • Safari
  • ოპერა

30. X: პირველი ტიპის

first-of-type ირჩევს მოცემული ტიპის პირველ ელემენტს. უკეთ რომ გავიგოთ, მოდით შევხედოთ მაგალითს.

პარაგრაფი

  • წერტილი 1
  • წერტილი 2
  • წერტილი 3
  • წერტილი 4

ახლა შეეცადეთ გაიგოთ, როგორ გამოვყოთ წერტილი 2.

გამოსავალი 1

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

გამოსავალი 2

P + ul li: last-child (შრიფტის წონა: თამამი;)

გამოსავალი 3

Ul:first-of-type li:nth-last-child(1) (შრიფტის წონა: თამამი; )

თავსებადობა

  • IE9+
  • Firefox 3.5+
  • Safari
  • ოპერა

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

1) .X

.თემა-სათაური (ფონის ფერი: ყვითელი;)

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

  • Chrome
  • Firefox
  • Safari
  • ოპერა

2) #X

#content (სიგანე: 960 პიქსელი; ზღვარი: 0 ავტომატური; )

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

    რომელი ბრაუზერებია მხარდაჭერილი:
  • Chrome
  • Firefox
  • Safari
  • ოპერა

3) *

* ( ზღვარი: 0; ბალიშები: 0; )

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

* სიმბოლო ასევე შეიძლება გამოყენებულ იქნას ყველა ბავშვის ელემენტის შესარჩევად:

#header * ( საზღვარი: 5px მყარი ნაცრისფერი; )

ეს მაგალითი ირჩევს ელემენტის ყველა შვილს (შთამომავლებს) #header . მაგრამ ყოველთვის უნდა გვახსოვდეს, რომ ეს სელექტორი საკმაოდ მძიმეა ბრაუზერისთვის.

    რომელი ბრაუზერებია მხარდაჭერილი:
  • Chrome
  • Firefox
  • Safari
  • ოპერა

4) X

a (ფერი: მწვანე; ) ol (ზღვარი მარცხნივ: 15 პიქსელი;)

CSS ტიპის ამომრჩევი. როგორ ავირჩიოთ ერთი და იგივე ტიპის ყველა ელემენტი, თუ მათ არ აქვთ არც id და არც კლასები? ღირს CSS ელემენტის ტიპის სელექტორის გამოყენება. მაგალითად, გვერდზე ყველა დალაგებული სიის შესარჩევად გამოიყენეთ ol(...), როგორც ზემოთ არის ნაჩვენები.

    რომელი ბრაუზერებია მხარდაჭერილი:
  • Chrome
  • Firefox
  • Safari
  • ოპერა

5) X Y

li a (შრიფტის წონა: თამამი; ტექსტის დეკორაცია: არცერთი;)

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

    რომელი ბრაუზერებია მხარდაჭერილი:
  • Chrome
  • Firefox
  • Safari
  • ოპერა

6) X + Y

div + p ( შრიფტი-ოჯახი: "Helvetica Neue", Arial, sans-serif; შრიფტის ზომა: 18px; )

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

    რომელი ბრაუზერებია მხარდაჭერილი:
  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Chrome

7) X > Y

#content > ul ( საზღვარი: 1px მყარი მწვანე; )

CSS შთამომავლების სელექტორი. განსხვავება X Y და X > Y სელექტორებს შორის არის ის, რომ მოცემული CSS სელექტორი შეარჩევს მხოლოდ ელემენტების უშუალო შვილებს (ის შეარჩევს მხოლოდ პირდაპირ შთამომავლებს). მაგალითად:

  • სიის ელემენტი
    • სიის პირველი ელემენტის შთამომავალი
  • სიის ელემენტი
  • სიის ელემენტი

CSS სელექტორი #content > ul შეარჩევს მხოლოდ ul-ს, რომელიც არის div-ის პირდაპირი შვილი id="container"-ით. ის არ შეარჩევს ul-ს, რომელიც არის პირველი li-ის შვილი. ეს არის საკმაოდ სწრაფი CSS სელექტორი.

    რომელი ბრაუზერებია მხარდაჭერილი:
  • Chrome
  • Firefox
  • Safari
  • ოპერა

8) X ~ Y

ol ~ p (ზღვარი მარცხნივ: 10 პიქსელი; )

დის (subling) ელემენტების ამომრჩევინაკლებად მკაცრი ვიდრე X + Y. ის შეარჩევს არა მხოლოდ პირველს, არამედ ყველა სხვა p ელემენტს შემდეგ ol.

    რომელი ბრაუზერებია მხარდაჭერილი:
  • Chrome
  • Firefox
  • Safari
  • ოპერა
a:link (ფერი: მწვანე; ) a:visited (ფერი: ნაცრისფერი; )

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

    რომელი ბრაუზერებია მხარდაჭერილი:
  • Chrome
  • Firefox
  • Safari
  • ოპერა

10) X

a (ფერი: წითელი;)

CSS ატრიბუტის ამომრჩევი. ეს მაგალითი ირჩევს მხოლოდ იმ ბმულებს, რომლებსაც აქვთ სათაურის ატრიბუტი.

    რომელი ბრაუზერებია მხარდაჭერილი:
  • Chrome
  • Firefox
  • Safari
  • ოპერა

11) X

a (ფერი: ყვითელი;)
    რომელი ბრაუზერებია მხარდაჭერილი:
  • Chrome
  • Firefox
  • Safari
  • ოპერა

12) X

a (ფერი: #dfc11f;)

ვარსკვლავი ნიშნავს, რომ მნიშვნელობა, რომელსაც თქვენ ეძებთ, უნდა იყოს სადღაც ატრიბუტში (href ატრიბუტის ნებისმიერი ნაწილი). ამ გზით შერჩეული იქნება ბმულები https://www..stijit-დან.

    რომელი ბრაუზერებია მხარდაჭერილი:
  • Chrome
  • Firefox
  • Safari
  • ოპერა

13)X

a ( ფონი: url(path/to/external/icon.png) განმეორების გარეშე; padding-left: 15px; )

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

    რომელი ბრაუზერებია მხარდაჭერილი:
  • Chrome
  • Firefox
  • Safari
  • ოპერა

14) X

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

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

    რომელი ბრაუზერებია მხარდაჭერილი:
  • Chrome
  • Firefox
  • Safari
  • ოპერა

15) X

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

აქ ჩვენ მივმართავთ CSS მორგებული ატრიბუტის ამომრჩევი. თითოეულ ბმულს ვამატებთ ჩვენს მონაცემთა ფაილის ტიპის ატრიბუტს:

ბმული

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

    რომელი ბრაუზერებია მხარდაჭერილი:
  • Chrome
  • Firefox
  • Safari
  • ოპერა

16) X

ტილდი (~) საშუალებას გაძლევთ მონიშნოთ კონკრეტული ატრიბუტი სივრცეში გამოყოფილი ატრიბუტების სიიდან. თქვენ შეგიძლიათ დაწეროთ ჩვენი საკუთარი data-info ატრიბუტი, რომელშიც შეგიძლიათ მიუთითოთ რამდენიმე საკვანძო სიტყვა, გამოყოფილი ინტერვალით. ამ გზით შეგიძლიათ მიუთითოთ, რომ ბმული გარეა და მიდის სურათზე.

ბმული

ამ ტექნიკის გამოყენებით ჩვენ შეგვიძლია შევარჩიოთ ელემენტები ჩვენთვის საჭირო ატრიბუტების კომბინაციით:

/* აირჩიეთ ელემენტი, რომლის data-info ატრიბუტი შეიცავს მნიშვნელობას გარე */ a ( ფერი: მწვანე; ) /* აირჩიეთ ელემენტი, რომლის data-info ატრიბუტი შეიცავს მნიშვნელობის სურათს */ a (საზღვარი: 2px წყვეტილი შავი; )

    რომელი ბრაუზერებია მხარდაჭერილი:
  • Chrome
  • Firefox
  • Safari
  • ოპერა

17) X:შემოწმებულია

შეყვანა: შემოწმებული (საზღვარი: 3px საწყისი შავი;)

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

    რომელი ბრაუზერებია მხარდაჭერილი:
  • Chrome
  • Firefox
  • Safari
  • ოპერა

18) X: შემდეგ

ფსევდოკლასები :bere და :after ძალიან სასარგებლოა - ისინი ქმნიან შინაარსს შერჩეულ ელემენტამდე და შემდეგ.

Clearfix:after ( შინაარსი: ""; ჩვენება: დაბლოკვა; წმინდა: ორივე; ხილვადობა: დამალული; შრიფტის ზომა: 0; სიმაღლე: 0; ) .clearfix ( *display: inline-block; _height: 1%; )

აქ, ფსევდო-კლასი:after-ის გამოყენებით, ბლოკის შემდეგ იქმნება ცარიელი ხაზი class.clearfix-ით და შემდეგ გასუფთავდება. ეს მიდგომა გამოიყენება, თუ შეუძლებელია overflow: დამალული თვისების გამოყენება.

    რომელი ბრაუზერებია მხარდაჭერილი:
  • Chrome
  • Firefox
  • Safari
  • ოპერა

19) X: hover

div:hover (ფონის ფერი: rgba (11,77,130,0.5); )

მიმართავს კონკრეტულ სტილს ელემენტზე, როდესაც მასზე მაუსის კურსორი დევს. Internet Explorer-ის ძველი ვერსიები ვრცელდება მხოლოდ :Hover ბმულებზე.

A: hover (საზღვარი-ქვედა: 1px წერტილოვანი ლურჯი;)

    რომელი ბრაუზერებია მხარდაჭერილი:
  • IE6+ (გამოიყენება მხოლოდ IE6-ის ბმულებზე)
  • Chrome
  • Firefox
  • Safari
  • ოპერა

20) X:არა(სელექტორი)

div:not(#content) (ფერი: ნაცრისფერი;)

ფსევდოკლასი არა (უარყოფები)ეს სასარგებლოა, როდესაც, მაგალითად, თქვენ უნდა აირჩიოთ ყველა div-ის გარდა id="content" .

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

*:not(p) (ფერი: ლურჯი;)

    რომელი ბრაუზერებია მხარდაჭერილი:
  • Chrome
  • Firefox
  • Safari
  • ოპერა

21) X::ფსევდოელემენტი

p::პირველი ხაზი (შრიფტის წონა: თამამი; შრიფტის ზომა: 24 პიქსელი; )

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

აბზაცის პირველი ასოს შერჩევა:

P::პირველი ასო (შრიფტი-ოჯახი: კურსორი; შრიფტის ზომა: 30 პიქსელი; შრიფტის წონა: თამამი; შიგთავსი-მარჯვნივ: 1 პიქსელი; )

აბზაცში პირველი სტრიქონის არჩევა:

P: პირველი ხაზი (შრიფტის ზომა: 28 პიქსელი; შრიფტის წონა: თამამი;)

    რომელი ბრაუზერებია მხარდაჭერილი:
  • Chrome
  • Firefox
  • Safari
  • ოპერა

22) X: პირველი შვილი

ul li:first-child (საზღვარი-ზემოდან: არცერთი;)

ფსევდო კლასის პირველი შვილიირჩევს მშობელი ელემენტის მხოლოდ პირველ შვილს. ხშირად გამოიყენება საზღვრების ამოსაღებად სიის პირველი ელემენტიდან. ეს ფსევდოკლასი მას შემდეგ არსებობდა CSS 1.

    რომელი ბრაუზერებია მხარდაჭერილი:
  • Chrome
  • Firefox
  • Safari
  • Opera 3.5+
  • Android

23) X:ბოლო შვილი

ul > li:last-child (საზღვარი-ქვედა: არცერთი;)

ფსევდოკლასის უკანასკნელი შვილიირჩევს მშობელი ელემენტის ბოლო შვილს. ის მხოლოდ მას შემდეგ გამოჩნდა CSS 3.

    რომელი ბრაუზერებია მხარდაჭერილი:
  • IE9+ (IE8 მხარს უჭერს პირველ შვილს, მაგრამ არა უკანასკნელს. Microsoft (c))
  • Chrome
  • Firefox
  • Safari
  • Opera 9.6+
  • Android

24) X:მხოლოდ-ბავშვი

div p:only-child (ფერი: მწვანე; )

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

    რომელი ბრაუზერებია მხარდაჭერილი:
  • Chrome
  • Firefox
  • Safari 3.0+
  • Opera 9.6+
  • Android

25) X:nth-child(n)

li:nth-child(3) (ფერი: შავი;)

ირჩევს ბავშვის ელემენტს პარამეტრში მითითებული ნომრით. n-ე შვილის ამომრჩეველიიღებს მთელ რიცხვს პარამეტრად, მაგრამ ითვლის 1-დან, ე.ი. თუ გსურთ აირჩიოთ სიის მეორე ელემენტი, გამოიყენეთ li:nth-child(2) . ყველა ფსევდოკლასი, რომელიც იყენებს nth-child-ს, გამოჩნდა მხოლოდ დასაწყისიდან 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) (ფერი: წითელი;)

თუ ul-ში ელემენტების დიდი სია გაქვთ და ბოლოდან მესამე ელემენტი უნდა აირჩიოთ? იმის ნაცვლად, რომ დაწეროთ li:nth-child(109) შეგიძლიათ გამოიყენოთ ბოლო შვილის სელექტორი nth-last-child. ეს მეთოდი იგივეა, რაც წინა, მაგრამ ითვლის ბოლოდან.

    რომელი ბრაუზერებია მხარდაჭერილი:
  • Chrome
  • Firefox 3.6+
  • Safari 3.1+
  • Opera 9.6+
  • Android 2.1+
  • iOS 2.0+

27) X:nth-of-typ(n)

ul: nth-of-typ (3) ( კონტური: 1px წერტილოვანი შავი; )

თუ გვერდზე ოთხი შეუკვეთავი სიაა და თქვენ მხოლოდ მესამეს სტილი გჭირდებათ, რომელსაც არ აქვს უნიკალური ID, უნდა გამოიყენოთ nth-of-type.

    რომელი ბრაუზერებია მხარდაჭერილი:
  • Chrome
  • Firefox 3.6+
  • Safari 3.1+
  • Opera 9.6+
  • Android 2.1+
  • iOS 2.0+

28) X:nth-Last-of-typ(n)

ul: nth-last-of-type(3) ( საზღვარი: 2px ქედი ლურჯი; )

ფსევდოკლასი nth-Last-of-typ(n)გამიზნულია ბოლოდან გარკვეული ტიპის n-ე ელემენტის შესარჩევად.

    რომელი ბრაუზერებია მხარდაჭერილი:
  • Chrome
  • Firefox 3.6+
  • Safari 3.1+
  • Opera 9.6+
  • Android 2.1+
  • iOS 2.0+

29) X: მხოლოდ ტიპის

li:only-of-type (შრიფტის წონა: თამამი;)

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

    რომელი ბრაუზერებია მხარდაჭერილი:
  • Chrome
  • Firefox 3.5+
  • Safari 3.1+
  • Opera 9.6+
  • Android 2.1+
  • iOS 2.0+

30) X: პირველი ტიპის

ul:first-of-type > li:nth-child(3) ( შრიფტის სტილი: დახრილი; )

პირველი ტიპის ფსევდო კლასიირჩევს მოცემული ტიპის პირველ ელემენტს.

    რომელი ბრაუზერებია მხარდაჭერილი:
  • Chrome
  • Firefox 3.5+
  • Safari 3.1+
  • Opera 9.5+
  • Android 2.1+
  • iOS 2.0+

და-ძმის სელექტორის გამოყენებით, შეგიძლიათ აირჩიოთ ყველა მითითებული ელემენტი, რომელიც მიჰყვება კოდში მითითებულ ელემენტს. დაკავშირებული სელექტორი მითითებულია "~" (ტილდი) სიმბოლოთი.

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

გამარჯობა!

ამ მაგალითში, დაკავშირებული სელექტორი h1~p მუშაობდა ყველა ტეგზე

შემდეგი ტეგი

.

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

ძმის ელემენტის ამომრჩევი CSS-ში

გამარჯობა!

No1 აბზაცის ტექსტი წარმოუდგენელ თავგადასავლებს ეხება.

No2 აბზაცის ტექსტი წარმოუდგენელ თავგადასავლებს ეხება.

ტექსტური დივი No1 წარმოუდგენელი თავგადასავლების შესახებ.

მე-3 აბზაცის ტექსტი წარმოუდგენელ თავგადასავალზეა.

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

რომლებიც ტეგის შთამომავლები არიან

, ანუ No1 და No2 პუნქტისთვის.

ანუ დაკავშირებულ ელემენტებს უნდა ჰქონდეთ საერთო მშობელი და იყოს იმავე დონეზე.

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

დაკავშირებული სელექტორი და ფსევდო-კლასი: hover

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

ძმის ელემენტის ამომრჩევი CSS-ში

გადაიტანეთ კურსორი აქ.

+

შედეგი იქნება ასეთი:

სურათი 1. დაკავშირებული სელექტორები და :hover.

უფრო რეალური და რთული მაგალითი

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

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


სურათი 2. ფორმის ველი ხელსაწყოს რჩევით.

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

ძმის ელემენტის ამომრჩევი CSS-ში

მომხმარებლის სახელი:
7 სიმბოლო - არ გამოიყენოთ სპეციალური სიმბოლოები.
პაროლი:
4-15 სიმბოლო - არ გამოიყენოთ სპეციალური სიმბოლოები.

გამოჩენილი ბლოკის სტილის დასადგენად აქ გამოიყენება input:focus ~ div სელექტორი. ეს ნიშნავს, რომ როდესაც შეყვანის ფორმის ველი იღებს ფოკუსს, ყველა ძმური div ტეგი სტილიზებულია: display : block, რაც ნიშნავს, რომ ისინი ხილული ხდება. აქამდე ჰქონდათ საკუთრების ჩვენება: არცერთი, ანუ უხილავი იყო.

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

  1. მინიშნების ტექსტი ინახება ერთ ბლოკში, რომელიც გარშემორტყმულია მომრგვალებული კუთხეებით;
  2. სამკუთხედი, ბლოკი ნულოვანი სიმაღლით და სიგანით და საზღვარი, რომელიც ხაზავს სამკუთხედს;
  3. კიდევ ერთი სამკუთხედი, ოღონდ თეთრი და გადატანილი 1px მარჯვნივ (ეს სამკუთხედი ავსებს წინას და ტოვებს მხოლოდ გვერდით ხაზს 1 px).

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

დაკავშირებული სტატიები