Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

30 CSS სელექტორი რომელიც უნდა გახსოვდეთ

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called CSS3 Mastery.
10 CSS3 Properties you Need to be Familiar With
Getting to Work with CSS3 Power Tools

Georgian (ქართული) translation by Tsotne Kalandadze (you can also view the original English article)

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

1. *

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

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

* - ფიფქის სიმბოლოს გამოყენება შესაძლებელია შვილობილ სელექტორებთანაც.

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

იხილეთ დემო

თავსებადობა

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

2. #X

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

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

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

იხილეთ დემო

თავსებადობა

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

3. .X

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

იხილეთ დემო

თავსებადობა

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

4. X Y 

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

პრო-რჩევა - თუ თქვენი სელექტორი გამოიყურება მსგავსად X Y Z A B.error, თქვენ უშვებთ შეცდომას.  ყოველთვის კითხეთ თქვენს თავს საჭიროა თუ არა მსგავსი დატვირთვის მინიჭება.

იხილეთ დემო

თავსებადობა

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

5. X

როგორ უნდა მოიქცეთ თუ გსურთ, რომ მონიშნოთ გვერდზე არსებული ყველა ელემენტი, არა მათი id - ის ან class - ის მიხედვით, არამედ ელემენტის type - ის (ტიპის) მიხედვით. გაიმარტივეთ საქმე და გამოიყენეთ ელემენტის ტიპის სელექტორი. თუ გჭირდებათ, მონიშნოთ ყველა არათანმიმდევრული ჩამონათვალი, გამოიყენეთ ul {}.

იხილეთ დემო

თავსებადობა

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

6. X:visited და X:link

:link ფსევდო-კლასს ვიყენებთ ყველა იმ ბმულის (ანკერის) ტეგის მოსანიშნად, რომლებზეც ჯერ არ დაუჭერიათ. 

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

იხილეთ დემო

თავსებადობა

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

7. X + Y

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

იხილეთ დემო

თავსებადობა

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

8. X > Y

სტანდარტულ X Y - საგან განსხვავებით, X > Y მონიშნავს მხოლოდ მის პირდაპირ შვილობილს. მაგალითისთვის, წარმოვიდგინოთ შემდეგი შემთხვევა.

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

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

იხილეთ დემო

თავსებადობა

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

9. X ~ Y

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

იხილეთ დემო

თავსებადობა

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

10. X[title]

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

იხილეთ დემო

თავსებადობა

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

11. X[href="foo"]

მოცემული კოდი მონიშნავს მხოლოდ იმ ანკერის ტეგებს, რომელთა ბმულიც გახლავთ http://net.tutsplus.com; და მიიღებენ ჩვენს ბრენდირებულ მწვანე ფერს.  ყველა სხვა დანარჩენი ანკერის ტეგი დარჩება ხელშეუხებელი. 

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

მიუხედავად იმისა, რომ მსგავსი მეთოდი კარგად მუშაობს, ის მაინც შედარებით მოუქნელია.  წარმოიდიგინეთ რომ ბმულის გადამისამართება მართლაც ხდება Nettuts+ - ზე, მაგრამ შესაძლოა მისამართი იყოს nettuts.com და არა სრული url? მოცემულ შემთხვევაში შეგვიძლია გამოვიყენოთ ცოტაოდენი რეგულარული გამოსახულების სინტაქსი. 

იხილეთ დემო

თავსებადობა

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

12. X[href*="nettuts"]

სწორედ ის არის რაც ჩვენ გვჭირდება.  ფიფქის სიმბოლო მიუთითებს, რომ ატრიბუტი სადმე უნდა შეიცავდეს მოცემულ მნიშვნელობას (tuts).  ამ შემთხვევაში მოინიშნება ჩამოთვლილთაგან ყველა: nettuts.comnet.tutsplus.com და tutsplus.com

დაიმახსოვრეთ რომ ეს არის საკმაოდ ფართო ფორმულირება. რა მოხდება თუ ბმულის ტეგი გადამისამართებულია რომელიმე არა-Envato საიტზე, რომლის მისამართიც შეიცავს tuts - ს? როდესაც საჭიროა მეტი კონკრეტიკა, გამოიყენენთ ^ და $, რათა გამოყოთ სიტყვის თავი და ბოლო.

იხილეთ დემო

თავსებადობა

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

13. X[href^="http"]

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

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

ალბათ შეატყობდით, რომ არ ვიყენებთ http:// - ს; ეს იქნებოდა ფუჭი და არასაჭირო, რადგან არ მონიშნავდა მისამართებს, რომლებიც იწყება https:// - ით.

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

იხილეთ დემო

თავსებადობა

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

14. X[href$=".jpg"]

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

იხილეთ დემო

თავსებადობა

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

15. X[data-*="foo"]

როგორ უნდა მოვიქცეთ თუ გვსურს, მოვნიშნოთ სურათის ყველა ფორმატი: png, jpeg, jpg, gif? შეგვიძლია შევქმნათ რამდენიმე სელექტორი, მსგავსად:

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

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

იხილეთ დემო

თავსებადობა

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

16. X[foo~="bar"]

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

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

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

დამეთანხმებით, რომ საკმაოდ ჭკვიანური ხერხია.

იხილეთ დემო

თავსებადობა

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

17. X:checked

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

იხილეთ დემო

თავსებადობა

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

18. X:after

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

ბევრმა ადამიანმა მოცემული ფსევდო კლასების გამოყენება დაიწყო მას შემდეგ, რაც აღმოაჩინა clear-fix - ის ხრიკი.

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

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

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

თავსებადობა

  • IE8+
  • Firefox
  • Chrome
  • Safari
  • Opera

19. X:hover

დარწმუნებული ვარ,  რომ ამ მეთოდის შესახებ გეცოდინებათ. მისი ოფიციალური დასახელება გახლავთ user action pseudo class შეიძლება ის ცოტა დამაბნეველად ჟღერს, თუმცა სინამდვილეში სრულებითაც არ არის ასე. თუ გსურთ რომ ელემენტს მიანიჭოთ სპეციალური სტილები, როდესაც მომხმარებელი მას გადაატარებს მაუსს,  მაშინ მონიშვნის ეს მეთოდი სწორედ თქვენთვის არის!

გაითვალისწინეთ, Internet Explorer - ის ძველი ვერსიები რეაგირებს :hover ფსევდო კლასზე მხოლოდ ბმულის ტეგის შემთხვევაში. (სხვა ელემენტებზე არ რეაგირებს).

ყველაზე ხშირად მოცემულ მეთოდს გამოიყენებთ როდესაც ბმულის ტეგს მიანიჭებთ border-bottom - ს, მაუსის გადატარებისას. 

პრო-რჩევაborder-bottom: 1px solid black; გამოიყურება უკეთ, ვიდრე text-decoration: underline;.

თავსებადობა

  • IE6+ (IE6+ - ის შემთხვევაში :hover უნდა მიენიჭოს ანკერულ ელემენტს)
  • Firefox
  • Chrome
  • Safari
  • Opera

20. X:not(selector)

negation ფსევდო კლასი არის განსაკუთრებით სასარგებლო ვთქვათ მსურს მოვნიშნო ყველა დივი, გარდა იმ ერთისა, რომლის id არის container. ზემოთ მოყვანილი კოდი მშვენივრად შეასრულებს ამ დავალებას.

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

იხილეთ დემო

თავსებადობა

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

21. X::pseudoElement

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

ფსევდო-ელემენტი იქმნება ორი ორწერტილისგან: ::

პარაგრაფის პირველი სიმბოლოს მონიშვნა

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

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

პარაგრაფის პირველი ხაზის მონიშვნა

როგორც მოსალოდნელია, ::first-line ფსევდო ელემენტი მონიშნავს მხოლოდ პარაგრაფის პირველ ხაზს. 

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

იხილეთ დემო

თავსებადობა

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

22. X:nth-child(n)

ალბათ გახსოვთ ის დღეები, როდესაც არ არსებობდა ჯგუფში კონკრეტული ელემენტის მონიშვნის საშუალება? nth-child ფსევდო კლასი ამ პრობლემის გადაჭრის საშუალებაა!

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

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

იხილეთ დემო

თავსებადობა

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari

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

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

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

იხილეთ დემო

თავსებადობა

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera

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

ხანდახან გჭირდებათ, რომ child (შვილობილის) ნაცვლად, ელემენტი მონიშნოთ მისი type - ის, ანუ ტიპის მიხედვით.

წარმოიდგინეთ მარკირება, რომელიც შეიცავს ხუთ არათანმიმდევრულ ჩამონათვალს. თუ გსურთ რომ სტილი მიანიჭოთ მხოლოდ მესამე ul - ს, და არ გაქვთ უნიკალური id, შეგიძლიათ გამოიყენოთ nth-of-type(n) ფსევდო კლასი. მოცემულ კოდში, მხოლოდ მესამე ul - ს ექნება გარშემო ჩარჩო.

იხილეთ დემო

თავსებადობა

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari

25. X:nth-last-of-type(n)

დიახ, იმისათვის რომ შევინარჩუნოთ თანმიმდევრობა, ასევე შეგვიძლია გამოვიყენოთ nth-last-of-type, რომელიც ათვლას დაიწყებს სიის ბოლოდან და მონიშნავს საჭირო ელემენტს.

თავსებადობა

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera

26. X:first-child

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

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

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

იხილეთ დემო

თავსებადობა

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

27. X:last-child

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

მაგალითად

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

მარკირება

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

CSS

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

Styled List

იმისათვის, რომ ჩამონათვალს შევძინოთ სიღრმე, ყოველ li - ს უნდა მიენიჭოს border-bottom, რომელიც ოდნავ უფრო მუქი იქნება ვიდრე li - ს უკანა ფონი. შემდეგ მივანიჭოთ border-top, რომელიც უნდა იყოს ოდნავ უფრო ბაცი.

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

Fixed

როგორც ხედავთ პრობლემა მოგვარებულია!

იხილეთ დემო

თავსებადობა

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

IE8 - ს გააჩნია :first-child - ის მხარდაჭერა, თუმცა არა :last-child - ის. შეგიძლიათ თავადაც შეამოწმოთ.

28. X:only-child

სიმართლე რომ ითქვას, only-child ფსევდო კლასს ძალიან იშვიათად გამოიყენებთ.  თუმცა, თუ ამის საჭიროება დადგება, ის თქვენს სამსახურშია.

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

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

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

იხილეთ დემო

თავსებადობა

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

29. X:only-of-type

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

დასაწყისისთვის დაუსვით თქვენს თავს კითხვა: როგორ შევასრულებდი მსგავს ოპერაციას? შეგიძლიათ გამოიყენოთ ul li, მაგრამ ის მონიშნავს ყველა ჩამონათვალის (list) ელემენტს.  ერთადერთი გამოსავალი არის only-of-type - ის გამოყენება.

იხილეთ დემო

თავსებადობა

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera

30. X:first-of-type

first-of-type ფსევდო კლასი საშუალებას გვაძლევს მოვნიშნოთ თავისი ტიპის პირველი სიბსი (ძმა ან და).

ტესტი

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

ისე რომ არ წაიკითხოთ ქვემოთ მოცემული პასუხი, სცადეთ გარკვევა, თუ როგორ მოვნიშნოდ მხოლოდ "List Item 2". როდესაც შეძლებთ გარკვევას (ან დანებდებით), განაგრძეთ კითხვა.

პასუხი 1

არსებობს მოცემული პრობლემის გადაჭრის განსხვავებული გზები.  ჩვენ განვიხილავთ საკმაოდ ბევრ მათგანს. მოდით დავიწყოთ first-of-type - ის გამოყენებით.

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

პასუხი 2

კიდევ ერთი გზა გახლავთ მოსაზღვრე სელექტორის გამოყენება.

ამ შემთხვევაში ვპოულობთ ul - ს, რომელიც მდებარეობს პირდაპირ p ტეგის შემდეგ, საბოლოოდ კი ვნიშნავთ ელემენტის უკანასკნელ შვილობილს.

პასუხი 3

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

ამჯერად ვნიშნავთ პირველ ul - ს, ხოლო შემდგომ ეტაპზე ჩამონათვალის პირველ ელემენტს, თუმცა ძიებას ვიწყებთ ბოლოდან! :)

იხილეთ დემო

თავსებადობა

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera

დასკვნა

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

ამასთანავე, JavaScript - ის ბიბლიოთეკებთან (JQuery) მუშაობის დროს, ყოველთვის შეეცადეთ, რომ გამოიყენოთ CSS3 ში ჩაშენებული სელექტორები და არა ბიბლიოთეკაში არსებული მეთოდები/სელექტორები. ეს გახდის თქვენს კოდს უფრო სწრაფს, რადგან სელექტორების ძრავს შეუძლია საკუთარი სინტაქსური ანალიზის ნაცვლად, გამოიყენოს ბრაუზერში უკვე არსებული ანალიზის ფუნქცია.

მადლობთ გაკვეთილის წაკითხვისთვის, იმედი მაქვს რომ დაეუფლეთ რამოდენიმე ახალ ხრიკს!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.