• Home
  • Categories
  • Recent
  • Popular
  • Top
  • Tags
  • Users
  • Groups
  • Documentation
    • Home
    • Read API
    • Write API
    • Plugin Development
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
v3.5.2 Latest
Buy Hosting

Here's a helpful CSS cheatsheet!

Scheduled Pinned Locked Moved Technical Support
csscheatsheet
3 Posts 2 Posters 2.5k Views
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • trevorT Offline
    trevorT Offline
    trevor Plugin & Theme Dev Anime Lovers GNU/Linux
    wrote on last edited by trevor
    #1

    Selectors

    .class Selects all elements with .class
    #id Selects all elements with #id
    * Selects all elements
    div Selects all <div> elements
    div, p Selects all <div> and <p> elements
    div > p Selects all <p> elements with a parent of <div>
    div + p Selects all <p> elements placed immediately after <div> elements
    div~ul Selects all <p> elements preceded by <div> elements
    -_-

    Attributes
    [attribute] Selects all elements with the specified attribute
    [attribute=value] Selects all elements where the specified attribute is equal to ‘value’
    [attribute~=value] Selects all elements with an attribute containing the word ‘value’
    [attribute|=value] Selects all elements with an attribute list starting with ‘value’
    [attribute^=value] Selects all elements with an attribute beginning with ‘value’
    [attribute$=value] Selects all elements with an attribute ending with ‘value’
    [attribute*=value] Selects all elements with an attribute containing the substring ‘value’

    -_-

    Pseudo-classes
    a:link Selects all unvisited links
    a:visitedSelects all visited links
    a:hover Selects links on mouse hover
    a:active Selects the active link element
    p::after Insert content after <p> element
    p::before Insert content before <p> element
    input:checked Selects every checked <input> element
    input:disabled Selects every disabled <input> element
    p:empty Selects every <p> element with no children
    input:enabled Selects every enabled <input> element
    p:first-child Selects every <p> element that is the first child of its parent
    p::first-letter Selects the first letter of every <p> element
    p::first-line Selects the first line of every <p> element
    p:first-of-type Selects every <p> element that is the first <p> element of its parent
    input:focus Selects the <input> element which has focus
    input:in-range Selects <input> elements with a value within a specified range
    input:invalid Selects all <input> elements with an invalid value
    p:lang(language) Selects all <p> elements with a lang attribute equal to ‘language’
    p:last-child Selects every <p> element which is the last child of its parent
    p:last-of-type Selects every <p> element which is the last <p> element of its parent
    :not(p) Selects every element that is not a <p>
    p:nth-child(2) Selects every <p> element that is the second child of its parent
    p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child
    p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last child
    p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent
    p:only-of-type Selects every <p> element that is the only <p> element of its parent
    p:only-child Selects every <p> element that is the only child of its parent
    input:optional Selects <input> elements with no ‘required’ attribute
    input:out-of-range Selects <input> elements with a value outside a specified range
    input:read-only Selects <input> elements with the ‘readonly’ attribute specified
    input:read-write Selects <input> elements with the ‘readonly’ attribute not specified
    input:required Selects <input> elements with the ‘required’ attribute specified
    :root Selects the documents root element
    ::selection Selects the portion of an element that is selected by a user
    #id:target Selects the current active #id element
    input:valid Selects all <input> elements with a valid value

    Hopes this helps you guys!

    1 Reply Last reply
    9
  • julianJ Offline
    julianJ Offline
    julian GNU/Linux
    wrote on last edited by
    #2

    Nice list @trevor ! I personally use this list, provided by the w3c (not to be confused with w3schools, lol)

    trevorT 1 Reply Last reply
    0
  • trevorT Offline
    trevorT Offline
    trevor Plugin & Theme Dev Anime Lovers GNU/Linux
    replied to julian on last edited by trevor
    #3

    @julian Believe it or not, but I've never went there before for CSS reference, but I'll read up on it further here since of course they are the "authority" in web standards.

    1 Reply Last reply
    1

Copyright © 2023 NodeBB | Contributors
  • Login

  • Don't have an account? Register

  • Login or register to search.
Powered by NodeBB Contributors
  • First post
    Last post
0
  • Home
  • Categories
  • Recent
  • Popular
  • Top
  • Tags
  • Users
  • Groups
  • Documentation
    • Home
    • Read API
    • Write API
    • Plugin Development