Ta reda på vad en CSS Descendent Selector är

Strukturen i ett HTML-dokument liknar ett släktträd. I din familj har du dina föräldrar och andra som kom före dig. Det här är dina förfäder. Barn och de som kommer efter dig på det trädet är dina ättlingar. HTML fungerar på ett liknande sätt. Elements som är inuti andra element är deras efterkommande. Till exempel, eftersom nästan varje HTML-element är inuti taggar, de skulle vara en efterföljare av det element. Detta förhållande är viktigt att förstå när du börjar arbeta med CSS och behöver rikta in specifika element för att tillämpa visuella stilar.

CSS Descendent Selectors

En CSS-efterkommande väljare gäller de element som ligger inuti ett annat element (eller mer exakt angivet, ett element som är en efterföljare av ett annat element). Till exempel har en oorderad lista en tagg med taggar som efterkommande. Låt oss använda följande HTML som ett exempel:

• det här är en länk

De LI taggar är efterkommande av UL märka. De en taggen är en efterkommer av både de LI (barns efterkommande) och UL (barnbarns efterkommande) taggar. Om du funderar på att tänka på detta med exempel på släktträdet, så

skulle vara föräldern, den
• skulle vara det elementets barn, och det skulle vara barnet på
• och barnbarnet på
  .

  Så hur skulle du rikta in specifika delar på en webbsida med hjälp av dessa ättlingar? Först måste du definiera efterföljande väljare genom att använda två (eller fler) typväljare separerade av mellanslag.

  li en {text-decoration: none; }

  I det exemplet skulle stilarna endast gälla ett länkelement () som är en efterföljare av ett listobjektelement (

  • ). Alla andra länkar på sidan som inte är efterföljare av ett listobjekt skulle inte få denna stil.

    En viktig sak att komma ihåg är att det spelar ingen roll hur många taggar de är mellan de taggar du kan använda i din efterföljande väljare. Om det andra elementet är inneslutet någonstans inom det första elementet kommer det att väljas som en efterkommande.

    Om du vill välja alla ankare som härstammar från ul-element, skulle du skriva:

    ul en {text-decoration: none; }

    Nu gäller dessa stilar för alla länkar som är en efterföljare av en listobjekt. Du kan också skriva den här väljaren

    ul li a {text-decoration: none; }

    Detta är en efterföljande väljare som använder mer än två typväljare. I detta fall skulle detta gälla för länkar som är inuti som listobjekt och även inuti en orörd lista.

    Använda Class Selectors och ID Selectors

    Selektorerna som du stiger från behöver inte alltid vara avkomlingar. Tänk dig att du hade ett område på webbplatsen (som en division) med ett ID-attribut på "skylt". Du kan ställa in en efterföljande väljare av det ID:

    #billboard ul {bakgrundsfärg: #ccc; }

    Detta skulle utforma den oordnade listan som är en efterkommer av ett element med ett ID-nummer av "skylt". Du kan göra samma för klassvärden.

    div.billboard ul {bakgrundsfärg: #ccc; }

    Detta förutsätter att divisionen har ett klassvärde av "skylt". CSS ovan skulle utforma

    element inuti någon delning som har detta klassvärde.

    Du kan bli riktigt tunghänt och ordentlig med efterföljande väljare. Om du till exempel använder Dreamweaver för att skriva din HTML-kod, finns det en inställning när du lägger till nya CSS-regler som automatiskt skapar väljaren baserat på placeringen av din markör på den sidan. Vad Dreamweaver gör i dessa fall är att skapa en wildly verbose och lång efterföljande väljare. Så mycket specificitet är inte nödvändigt för att din CSS ska fungera. Vad du vill göra är att hitta en balans mellan en avstämningsväljare som är tillräckligt specifik så att du kan borra ner till exakt vilka element du behöver (utan att stilera dem du inte vill påverka) utan att ha CSS-regler som har selektorer som är överdrivna stor.