0 points
Submitted by Dylan Bremner
about 7 years

When to use a class full stop

I may have overlooked this in an earlier lesson so let me know if possible.

But I’m noticing that at times we are calling classes with a period ex: (‘classA’) and other times without ex: (‘.classB’).

Would someone be able to clarify to a beginner why we are choosing/not choosing to employ a period when calling a CSS class.

Answer 5599da4b76b8fe043f0002f4

0 votes

Permalink

Every HTML-Element has so called attributes. One of the possible attributes, is the class-attribute.

If you write the HTML-document, you add the class-attribute within the Element-Tag by using the syntax class-keyword = then a string containing the class-name OR mutliple class-names which are =separated=from=eachother= by a space

Thus with <div class=”myClass1 myClass2 myClass3” ></div> you now have a DIV-Element carrying 3 classes myClass1, myClass2 and myClass3

As part of its CSS-category-of-Methods jQuery gives you the ability to manipulate this class-attribute by providing the addClass()-, removeClass()-, toggleClass()-Methods. You will have to provide the Method at least 1 argument which is the string VALUE of the class-name. Thus you have to change $(‘.article’).removeClass(‘.current’) $(this).addClass(‘.current’) into $(‘.article’).removeClass(‘current’) $(this).addClass(‘current’)

The confusion when to use a pre-pending dot or NOT… In the Cascading Style Sheet syntax, you have to prepend-a-dot to the classname so the CSS will interpret it as a class-attribute So in the file style.css you will find an object identified by .current, In this .current object the background property-key is set to a particular VALUE

jQuery uses the same syntax to identify a class-attribute like in the jQuery-selector $(“.current”) by which this HTML-Element and all it’s CHILDREN are selected into a jQuery-object,

This parent-HTML-Element carries the class-attribute with class-name “current”

Reference::

google search class site:jquery.com https://api.jquery.com/category/selectors/ http://api.jquery.com/class-selector/ https://api.jquery.com/element-selector/

what is CSS explained site:developer.mozilla.org https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/What_is_CSS

Some reference-material: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes

www.crockford.com

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

points
Submitted by Leon
about 7 years

Answer 5599dcba937676cf07000534

0 votes

Permalink

- - - - - - - - - - - - S t a t u s U p d at e - - - - - - - - - -

= = = = = = = D ocument O bject M odel = = = = =

                     2html
                       |
        |--------------+-----------|
      3head                      8body
        |                          |
  |-----|+----|                    |
  |     |     |                    |
4link 5link 6link                9div
                                   |
  |----------------|---------------+---|--------------|
  |                |                   |              |
10form           15div(.button-group 20ul         24script(2x)
   |                |  .pull-right)    (.posts)    25script
11div(.form-group)  |
   |                |
12textarea          |
    (.form-control  |
    .status-box)    |
                    |
         |----------+----|
       16p(.counter)   17a(.btn
         |               | .btn-primary)
        text            text
        node            node
points
Submitted by Leon
about 7 years

Answer 5599deaa937676a9a40003c8

0 votes

Permalink

points
Submitted by Leon
about 7 years

Answer 559aa3f99113cb7067000724

0 votes

Permalink

Thank you for this thorough response Leon!

points
Submitted by Dylan Bremner
about 7 years