CSS

-

 A List Of All CSS Selectors 

Thus far, we already learned about a lot of key CSS selectors. Here's a list / summary of all the CSS selectors that you can use in CSS (including some, which we haven't seen yet):

  • Tag type selector

    • CSS: p { ... }

    • Would select this HTML element for example: <p>Some text...</p>

    • This selector selects all HTML elements that are of this tag type

  • ID selector

    • CSS: #some-id { ... }

    • Would select this HTML element for example: <h1 id="some-id">...</h1>

    • This selectors selects the element that has this ID on it (should only be once per page)

  • Class selector

    • CSS: .some-class { ... }

    • Would select this HTML element for example: <h1 class="some-class">...</h1>

    • This selector selects all HTML elements that have this class on them

  • Attribute selector (new)

    • CSS: [src] { ... }

    • Would select this HTML element for example: <img src="...">

    • This selector selects all elements that have this HTML attribute on them

  • Universal selector (new)

    • CSS: * { ... }

    • Would select this HTML element for example: <p>....</p><img ...>

    • This selector selects ALL HTML elements (directly, not through inheritance but as if you would target them all individually)

  • Grouping selector / selector list

    • CSS: p, .some-class { ... }

    • Would select this HTML element for example: <p>...</p><h2 class="some-class">...</h2>

    • This selector selects all elements that match the individual selectors in that list

  • Combined selector

    • CSS: p.some-class { ... }

    • Would select this HTML element for example: <p class="some-class">...</p>

    • This selector selects all elements that meet both conditions (i.e. "<p>" elements with "some-class" class on it, in this example)

  • Pseudo selector

    • CSS: a:hover { ... }

    • Would select this HTML element for example: <a>...</a> (when the user hovers over it)

    • This selector selects all elements that meet this "pseudo state" (i.e. all links that are hovered in this example)

Comments

Post a Comment

Popular posts from this blog

Arrays JavaScript Objects JavaScript

-
Image
  Arrays The Array object, as with arrays in other programming languages, enables storing a collection of multiple items under a single variable name and has members for performing common array operations. Description In JavaScript, arrays aren't primitives but are instead Array objects with the following core characteristics: JavaScript arrays are resizable and can contain a mix of different data types. (When those characteristics are undesirable, use typed arrays instead.) JavaScript arrays are not associative arrays and so, array elements cannot be accessed using arbitrary strings as indexes, but must be accessed using nonnegative integers (or their respective string form) as indexes. JavaScript arrays are zero-indexed: the first element of an array is at index 0, the second is at index 1, and so on — and the last element is at the value of the array's length property minus 1. JavaScript array-copy operations create shallow copies. (All standard built-in copy operations with...
Read more

ADVANCE FUNCTIONS JS

-
Image
 A function has access to the variable environment (VE) of excecution context it was created  Closure : VE attached to the function, exactly as it was at the time and place the function was created  A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function's scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time. A closure is the closed-over variable environment of the execution context in which a function wascreated, even after that execution context is gone. A closure gives a function access to all the variables of its parent function , even after that parent function has returned. The function keeps a reference to its outer scope, which preserves the scope chain throught time. A closure makes sure that a function doesn't loose connection to variable that...
Read more