Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Descendant Selectors vs "Chain" Selectors

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #166780
    vongoh
    Participant

    For some reason – in all of my tutorials and web searches – I’m having a tough time clearing this issue up once and for all:

    <code class="html"><!--Target for descendant selector-->
    
    
    I am blue!
    <code class="css">/* A descendant selector */
    
    .class-1 .class-2 {
      color: blue;
    }
    
    /* So ...what does this do? */
    
    .class-1.class-2 {
       color: green;
    }
    

    1) The second CSS block – this is not called a “chain selector”. What is the proper term for this so I can search for it?

    2) What does this target exactly?

    3) What are appropriate places to use this, and what are the specificity pitfalls associated with it?

    A simple issue but one that is falling through the cracks for me somehow. Thanks!

    #166781
    Paulie_D
    Member
    .class-1 .class-2 {
      color: blue;
    }
    

    This targets an element with a class of class2 that is within an element with a class of class1.

    <div class="class1">
      <div class="class2">I am blue!</div>
    </div>
    

    This however

    .class-1.class-2 {
      color: blue;
    }
    

    Targets an element that has both classes applied and only when it has both classes.

      <div class="class1 class2">I am blue!</div>
    

    https://css-tricks.com/multiple-class-id-selectors/

    #166782
    vongoh
    Participant

    Thank you! This is what I suspected – and the article is exactly the article I was searching to find, you rock.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.