Something wrong with compound selector task


#1

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?


#2

-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…


#3
  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

#4

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


#5

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


#6

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