Cila është selektuesi pasardhës i CSS?

Struktura e një dokumenti HTML është e ngjashme me një pemë familjare. Në familjen tuaj, ju keni prindërit tuaj dhe të tjerët që erdhën para jush. Këta janë paraardhësit tuaj. Fëmijët dhe ata që vijnë pas jush në atë pemë janë pasardhësit tuaj. HTML funksionon në mënyrë të ngjashme. Elementet që janë brenda elementëve të tjerë janë pasardhësit e tyre. Për shembull, meqë pothuajse çdo element HTML është brenda tagave , ata do të ishin pasardhës i elementëve të . Kjo marrëdhënie është e rëndësishme për të kuptuar kur fillon të punosh me CSS dhe duhet të targetosh elemente specifike për të aplikuar stilet vizuale.

CSS Selectors pasardhës

Një përzgjedhës pasardhës i CSS zbatohet për elementet që janë brenda një elementi tjetër (ose më saktë deklaruar, një element që është pasardhës i një elementi tjetër). Për shembull, një listë e parregulluar ka një etiketë me etiketa si pasardhës. Le të përdorim HTML-në e mëposhtme si shembull:

• kjo është një lidhje

  Etiketat LI janë pasardhës të tagut UL. Etiketa A është pasardhëse e dy etiketave LI (pasardhëse e fëmijëve) dhe UL (pasardhësit). Nëse mendoni të mendoni për këtë duke përdorur shembullin e pemës familjare,

  do të ishte prindi,
  • do të ishte fëmija i atij elementi dhe do të ishte fëmija i
  • dhe nipit të
    .

    Pra, si do t'i targetonit elemente specifike në një faqe interneti duke përdorur këto përzgjedhës pasardhës? Së pari, duhet të përcaktoni selektuesit pasardhës duke përdorur dy (ose më shumë) selektues të tipit të ndara me hapësira.

    li a {text-decoration: asnjë; }

    Në këtë shembull, stilet do të zbatoheshin vetëm për një element lidhjeje () që është pasardhës i elementit të elementit të listës (

    • ). Të gjitha lidhjet e tjera në faqe që nuk janë pasardhës të një pjese të listës nuk do të kishin këtë stil.

      Një gjë e rëndësishme që duhet të mbani mend është se nuk ka rëndësi se sa etiketa janë në mes etiketave që mund të përdorësh në zgjedhësin pasardhës. Nëse elementi i dytë është mbyllur kudo brenda elementit të parë do të zgjidhet si pasardhës.

      Nëse doni të zgjidhni të gjitha ankorat që rrjedhin nga elementët ul, ju do të shkruanit:

      ul a {text-decoration: asnjë; }

      Tani, këto stile do të zbatohen për çdo lidhje që është pasardhëse e një artikulli të listës. Ju gjithashtu mund të shkruani këtë përzgjedhës

      ul li a {text-decoration: asnjë; }

      Ky është një përzgjedhës pasardhës që përdor më shumë se dy përzgjedhës të tipit. Në këtë rast, kjo do të zbatohej për lidhjet që janë brenda në listën e sendeve dhe gjithashtu brenda një liste të parregulluar.

      Përdorimi i selektorëve të klasës dhe zgjedhësve të ID

      Zgjedhësit që po zbritni nuk duhet të jenë gjithmonë pasardhës të tipit. Për shembull, imagjinoni se keni pasur një zonë të faqes (si një ndarje) me një atribut ID të "billboard". Ju mund të krijoni një përzgjedhës pasardhës jashtë atij ID:

      #billboard ul {background-color: #ccc; }

      Kjo do të stilonte listën e parregullt që është pasardhëse e një elementi me një ID të "billboard". Ju mund të bëni të njëjtën gjë edhe për vlerat e klasës.

      div.billboard ul {background-color: #ccc; }

      Kjo supozon se ndarja ka një vlerë të klasës së "billboard". CSS më sipër do të stilizonte elementin

      brenda çdo divizioni që ka këtë vlerë të klasës.

      Ju mund të merrni me të vërtetë të rëndë dhe të folur me zgjedhës pasardhës. Për shembull, nëse përdorni Dreamweaver për të shkruar kodin tuaj HTML , ekziston një rregullim kur shtoni rregulla të reja CSS që do të krijojnë vetë përzgjedhësin bazuar në vendosjen e kursorit në atë faqe. Çfarë Dreamweaver bën në këtë rast është të krijojë një zgjedhës wildly verbose dhe të gjatë pasardhës. Kjo shumë specifikë nuk është e nevojshme që CSS juaj të punojë. Ajo që ju doni të bëni është të gjejmë një ekuilibër midis një përzgjedhësi pasardhës që është mjaft i veçantë në mënyrë që ju të mund të stërviteni me elementet e sakta që ju nevojiten (pa styling ato që nuk dëshironi të ndikoni) pa pasur rregulla CSS që kanë përzgjedhës që janë tepër të mëdha.