Potražite CSS3 izbornik s negacijom (NE)

Ovaj članak je dio našeg "Serija vodiča za HTML5 / CSS3" - posvećeni pomoći da postanete bolji dizajner i / ili programer. Kliknite ovdje da biste vidjeli više članaka iz iste serije.

CSS ima neke selektore koji omogućuju odabir elemenata u određenim uvjetima kao što su : hover, :fokus, :aktivan, Ipak, danas nećemo pokrivati te selektore. Razmotrit ćemo onu koja je još uvijek malo poznata metoda koju koristi većina web dizajnera - to je :ne izbornik ili također označen kao negator.

Što to radi?

Siguran sam da :ne Ime je već opisalo svoju funkciju, koju će jednostavno odabrati suprotno od navedenog elementa ili stanja. Na primjer:

Ova sintaksa će odabrati bilo koji drugi element osim p (Točka).

 : Nije (p)

Dok će primjer sintakse ispod odabrati div element koji to čini ne imati razred abeceda

 div: Ne (.abc)

U redu, sad pokušajmo ovaj selektor u pravom primjeru:

Prije svega, napravimo par odlomaka s nekoliko linkova s Wikipedije i nekoliko veza s izmišljenim domenama. Evo HTML oznake za odlomak.

  CSS: ne izbornik odabira
 Jujubes primijeniti sezama snaps chupa chups čokoladna torta. Zobena torta marshmallow wypas karamelna torta. Chupa gutlja gumeni medvjed s kolačima. Limun kapljice kolača vafla.
 Cheesecake čokoladna torta želatina slatko pecivo u prahu soufflÃ? Â? Ã © © torta. Wypas pamuk slatkiša limun kapi kolačić slatkiš krof bonbon marcipan. Macaroon bombona slatkiš žele. Čokoladna pita slatki štruk bijeli slez dragÃ? Â ?? Ã © e pamuk slatkiša Brownie marshmallow.
 Puding prelaze kandzu medvjeđeg sjemena. Grickalice od peciva s kolačima kolačić s voćnim kolačima sezamove slatke medenjake od želea. Slatkiš puding od slatkiša. Mrkva kolač muffin pamuk bombona tootsie roll kolač. Jelly grah opor je dragÃ? napolitanki od čokolade. Slatka peciva od karamela šećerna šljiva slatka peciva dragÃ ?? Â? bonbon bombon kolač.
 Torta od marcipanskog kolača wypas voćni kolač. Zobeni kolač čokoladni wypas dragÃ ?? Â © Ã © e šljiva mrkva torta glazura. Caramels čokoladni šunka croissant wafer cupcake pie jujubes čokoladni bar. Keksi slatkiš dragulji dragÃ Â © e.Candy pčelica zob kolač sezama snapscake u prahu tootsie roll biskvit medvjed pandža. SoufflÃ? Â ?? Ã'Â © gummi medvjed jelli grah sezam snaps faworki kolačić slatki bonbon.

Plan je ovdje: odabrat ćemo samo veze koje ne upućuju na Wikipediju, a zatim tim vezama dati uskličnik kako bi upozorili na te veze.

Prvo ćemo dodati :nakon pseudo-element na svim linkovima za postavljanje oznake, a mi ga definiramo kao inline blok element.

 a: nakon prikaz: inline-blok;

Zatim, da odaberemo svaku vezu koja ne upućuje na Wikipediju, kombinirat ćemo :ne s odabirom atributa. Odabir atributa ovdje će odabrati svaku oznaku sidra s kojom atribut href počinje http://en.wikipedia.org/ i kombiniranjem s :ne, očito će odabrati suprotno. Dakle, idemo:

 a: ne ([href ^ = "http://en.wikipedia.org/"]): nakon background-color: # F8EEBD; granica: 1px solid # EEC56D; granični radijus: 3px 3px 3px 3px; boja: # B0811E; sadržaj: "!"; veličina fonta: 10pt; margin-left: 5px; obloga: 1px 6px; pozicija: relativna;

Radi! Sidrene oznake koje ne upućuju na Wikipediju sada imaju uskličnik.

Chrome Bug

Ako ovo vidite u pregledniku Chrome, primijetit ćete da učinak prikazanog nije kao gore. Čini se da sve veze imaju uskličnik bez obzira na URL.

Ovaj je slučaj zapravo adresiran kao bug. Dakle, da popravimo ovaj bug, moramo dodati ovo pravilo.

 a [href ^ = "http://en.wikipedia.org/"] / * Chrome Hack * / display: inline-block;

Sada je problem trebao biti riješen.

Demo

Zaključak

U nekim okolnostima pomoću :ne selektor je stvarno najučinkovitija opcija, kao i gore navedeni primjer, gdje smo u mogućnosti odabrati neke nasumične elemente bez dodavanja nepotrebne klase ili dodatnog označavanja dokumentu.

Možete zapravo dodatno izgraditi velike efekte pomoću ovog selektora, a to je jedan primjer: Funkcionalnost filtra s CSS3