Something wrong with compound selector task

I can’t target second selector .red, it’s not displayed.
But the page is writing that I passed successfully this quiz.
What is wrong?

-1 could you provide a link to the lesson…
-2 and please mention the Browser & version
-3 and the Operating system you are working on…

  1. Flexible selections https://www.codecademy.com/en/courses/web-beginner-en-GfjC6/1/4?curriculum_id=50a3fad8c7a770b5fd0007a1
  2. Version 59.0.3071.115 (Official Build) (64-bit) Google Chrome.
  3. Windows 8.1

found with google search
fadeto site:jquery.com
https://api.jquery.com/fadeTo/

You could use

   $('.pink, .red').fadeTo(6000,0);

then it will take longer and you could see it happening…

div explanation will follow

Your HTML document will be loaded into your Browser
following the rules of the Document Object Model in short the DOM

You could draw a diagram
like

               html 
                |
      +---------+----------------+
      |                          |
     head                       body
      |                          |
  +---++------+             +----+-+------+------+
  |    |      |             |      |      |      |
title link script          div    div    div    div
                          (.red)       (.pink)

If you have to descibe the diagram
it would be like

html-tag is parent to the head and body tag
head and body tag are children and -direct-descendants of the html-tag
head and body tag are sibling toeachother

head-tag is parent to the title-, link- and script-tag
the title-, link- and script-tag are children and -direct-descendants of the head tag
the title-, link- and script-tag are descendants of the html-tag
the title-, link- and script-tag are sibling to eachother.

body-tag is parent to the div-tags
div tags are children and -direct-descendants of the body tag
div tags are descendants of the html-tag
div tags are sibling to eachother.

========================================================
div tags are block-level html elements
which would cause the div’s to be presented under eachother…
you make them =inline-block= via the CSS
display: inline-block;

change the CSS and use

div {
    height: 50px;
    width: 50px;
    border-radius: 100%;
    background-color: #FF9C5B;
    /*display: inline-block;*/
}

=====================================================

Reference

google search
== the Book ==
javascript [your question] site:developer.mozilla.org

== discussions / opinions ==
javascript [your question] site:stackoverflow.com

== guidance ==
www.crockford.com
http://javascript.crockford.com/code.html <---JavaScript code-convention
http://javascript.crockford.com/survey.html
https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript
www.developer.mozilla.org/en-US/docs/Web/JavaScript/Guide

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.