Sunday, 21 April 2013

What is a CSS Descendant Selector?

When I first came across this term I felt, as I do with most coding terms, terrified. It's actually not that complicated though!!

What it refers to, in plain English, is what I like to refer to as an element inside another element. The inner element is a descendant of the outer element!

For example in your html you're have:
     <ul>      <!-- This is the outer element -->
     <li>This is a descendant!</li>
     <li>This is another descendant!</li>
     </ul>

Here we see that the individual list items <li> are css decendants of the <ul> list.

Now, to call the list items in the css code you use the two type selectors, separated by spaces:
  ul li {
    list-style: inline;
  }


You can have multiple anchors within a tag, for example, here there are <a> tags and <li> tags inside the <ul>:



 <ul>      <!-- This is the outer element -->
     <li><a href="">This is a descendant!</a></li>
     <li>This is another descendant!</li>
   </ul>

Again, use two type selectors in the css:
   ul a {
   background-color = purple;
  }

You can also use id's in the css instead of selectors all the time:
   #list-div ul



So there! Not so complicated after all! This is helpful when you're trying to edit the styling of a list as a whole and then also the individual items within the list.

6 comments:

  1. However, before getting your piece of tracks published, complete the main licensing part.
    You can wrist watch Taylor Swift's real "22" music below.

    Feel free to surf to my page: agencja detektywistyczna warszawa

    ReplyDelete
  2. Undeniably believe that which you stated. Your

    favorite justification seemed to be at the internet the

    simplest thing to take into accout of. I say to you, I definitely get irked even as folks think about worries that they just don't recognise about. You controlled to hit the nail upon the top and also defined out the

    whole thing with no need side effect , folks could take a signal. Will likely be back to get more. Thanks

    Here is my website - Premier property management

    ReplyDelete
  3. I absolutely love your blog and find a lot of your post's to be just what I'm

    looking for. Would you offer guest writers to write content to suit your needs?
    I wouldn't mind writing

    a post or elaborating on some of the subjects you write

    related to here. Again, awesome

    blog!

    My page - www.corto.org

    ReplyDelete
  4. Hi there, just was alert to your weblog via Google,
    and located that it's really informative. I’m going to

    watch out for brussels. I’ll appreciate when you proceed this in future. Many people might be benefited from your writing. Cheers!

    Also visit my blog ... eve online selling slaves

    ReplyDelete
  5. Great blog here! Also your web site loads up very fast!
    What web host are you

    using? Can I get your affiliate link to your host?
    I wish my website loaded up as quickly as yours

    lol

    my webpage ... freesat wedding tv

    ReplyDelete
  6. Hello, i read your blog from time to time and i own
    a similar one and i was just

    wondering if you get a lot of spam feedback? If so how do you stop it,
    any plugin or anything you can suggest? I get so much lately it's driving me mad so any support is very much appreciated.

    my webpage :: ford used cars essex

    ReplyDelete