Main Menu

search

You are here

Home

CSS - Rule selectors

[last updated: 2024-01-12]
CSS

Great ref: (link to:) CSS Selectors
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors
http://web.simmons.edu/~grovesd/comm244/notes/week4/css-selectors
https://www.tutorialspoint.com/wildcard-selectors-and-in-css-for-classes
-----


      On This page:
  • reference/links

--------------------------------------------------------------------

  • Selectors are the first item in a CSS rule.
    They specify the specific element type to which the rule will apply.
      A rule like this:

      h1 {color: red;}

      hi {color: red;}

      will apply the color property red to all h1 elements,

  • Universal Selector:
    applies to all elements

    *??? {color: red;}

  • Classes and ID's:
    If, OTOH, you want to apply the rule to only some, but not all, of the h1 elements,
    then you must somehow differentiate the ones that you want the rule to apply to.


    You can do this with: Classes or ID's.
    If you have several instances of an element that you want to receive the "special" formatting rule, then use Classes.
    if you only have one instance of an element that you want to format with your rule, then use ID's.

    • ID's:
      • ID's are unique identifiers for a single instance of an element.
        Unique means there can only be one element in the html document with this id.
      • ID's are created/assigned to your special element when the element instance is created in the html code:
          The id is attached to the element as an attribute:

          <body>
                <h1 id="specialHeader">some text</h1>
          </body>

          ID names are case-sensitive, must start with an alpha character, and cannot contain spaces or tabs.

      • When you define the formatting for your id "specialHeader",
        and you construct the rule, whether in css file or in the <style> element,
        do it like this (with prefix "#"):

        #specialHeader { color: red; }

    • Classes:
      • Class identifiers can be used for as many elements as needed in your html document.
      • As in the ID identifier, class designation is assigned as an attribute to an element when it is created:

        <body>
              <h1 class="redHeader">some text</h1>
        </body>

        Class names are case-sensitive.

      • When you define the formatting that you want for your redHeader class,
        do it like this (with prefix "."):

        .redHeader { color: red; }

  • other ways:
    • ul.a { list-style-type: circle; }
      circle seems to be default. Others are disc, square, upper-Roman, lower-alpha

    • 'pseudo classes'

    • 'attribute selectors'

Powered by Drupal