Is first&nth child are really used?


#1

Do we really use the whole child, parent relationship in CSS, it seems to be so Impractical, can't we just use classes and ID'S instead?
Thank you for your time :smile:


#2

@gigapro83949,
I think it is better, if one understands the concept.

It all start's with you,
using a Browser
in which you load a HTML-file,
which we will call the HTML-Document.

This document has a minimal build of


<!DOCTYPE html>
  <html>
     <head>
          <title> </title>
     </head>
     <body>
     </body>
  </html>

The Browser =load's= this document into Memory
in a pattern that is described as
the Document Object Model
in short the DOM.
( the interpretation of the DOM is Browser & Version specific )

            html
             |
       +-----+------+
       |            |
     head          body
       |
     title

In the description of your document in DOM-talk...
you will encounter terms like:
parent children sibling descendants ascendants...

The HTML-Element has no parent
but is a parent to 2 child-Element's
the 'head'-Element
and
the 'body'-Element.

The 'head'- and 'body'-Element,
both being children to the 'html'-Element
are siblings to each-other.

The 'head'-Element is parent to the 'title'-Element...
the 'title'-Element is a child of the 'head'-Element
the 'title'-Element is also a descendant of the 'html'-Element.

The DOM has several interface's
over which you can access the data**/**information
held by the DOM.

One of the interface's is the Element-interface
you can divide the interface into
properties ( consisting of a property-key and it's associated VALUE )
and
methods ( giving you the functionality to manipulate the Elements )
https://developer.mozilla.org/en-US/docs/Web/API/Element
https://developer.mozilla.org/en-US/Learn/HTML/HTML_tags


#3

@gigapro83949,

If you are working with Tag selectors
you must be able to
read the index.html-document
following the guide-lines of the
DOM Document Object Model.

                   html
                     |
           + - - - - + - - - - +
           |                   |
          head                body
           |                   |
       + - - - +        +- - - +- - - +
       |       |        |      |      |
     link    title      p     div     p
                    (intro)    |  (summary)
                               |
                       + - - - + - - - - +
                       |                 |
                       p                 ul
                  (synopsis)             |
                                         |
                                 + - - - + - - - - +
                                 |       |         |
                                 li      li        li
                                 |       |         |
                                 p       p         p

The p-Tags are located:
html > body > p  (2)
html > body > div > p (1)
html > body > div > ul > li > p (3)
p         as selector we have selected all 6 p-Tag's
body > p  as selector we selected 2 p-Tags ==> Intro & Summary
div > p   as selector we have selected 1 p-Tag  ==> Synopsis
div p as selector we have selected 4 p-Tag's
li > p    as selector we have selected 3 p-Tags under the ul-Tag

Some reference-material:
As jQuery uses the same syntax as CSS for it's selector's
http://www.w3schools.com/jquery/trysel.asp


#4

@gigapro83949,

++++ CSS an Overview 9/26
If your Browser loads this HTML-document into memory

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>I Know Kung Fu (er, CSS)</title>
	</head>
	<body>
		<div>
			<h3>What's CSS for?</h3>
			<p>CSS is for styling HTML pages!</p>
			<h3>Why use it?</h3>
			<p>It makes webpages look <span>really rad</span>.</p>
			<h3>What do I think of it?</h3>
			<p>It's awesome!</p>
		</div>
	</body>
</html>

the Browser does the load
by using the Document Object Model

               html
                 |
       + - - - - + - - +
       |               |
      head            body
       |               |
   + - - - +           +
   |       |           |
 link    title        div     
                       |
     +- - - +- - -+- - +-+- - +- - - +
     |      |     |      |    |      |
    h3      p     h3     p    h3     p
                         |
                        span

+++
In DOM talk...
html Element has no parent, but is parent to a div Element.
The div Element is a descendant of html Element

div Element is a child of html,
AND is parent to 6 children

Those children are sibling's to each-other,
and are direct descendant of the div Element.

The second paragraph Tag, being the 4th child of the div Tag
is parent to a span Element.

In your link Element you defined
that the Styling specific's are defined
in the file 'stylesheet.css'

The CSS facility of your Browser will read this file
and will expect a specific syntax

css-Selector  {
     **a property**
     **property-key**: **property-Value**;
     }

For instance, we want all p-Tag to have the color red

 p {
    color: red;
 }

We want all span-Tags to be 'yellow'

span {
   color: yellow;
}

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

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

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

== guidance ==
www.crockford.com
[your question] site:crockford.com
- - http://javascript.crockford.com/code.html
- - http://javascript.crockford.com/survey.html

= http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page


#5

Thank you so much for these great information, and this good Explaination, and for your time


#6

What is not taught in the lesson is that you can use odd and even:

p:nth-child(even){ color: red; }
p:nth-child(odd){ color: blue; }

now all even paragraphs will be red, and all the odd paragraph blue. You could even each 3rd element. So yes, it is used, and it is good to know it exist, you can read more about it here


#7

Thank you so much .....