html & css
[!NOTE|label:references:]
stylus
[!TIP|label:references:]
font-ubuntu | marslo ( ubuntu )
gerrit comments:
tricky
:not(a[class*="btn"])==:is(a:not([class*="btn"])i.e.:
using bas64 string for svg
original
using
data:image/svg+xml;base64generate bas64 encoded string
using bas64 string in css
bootstrap
using boostrap sytles
[!NOTE|style:callout]
bootstrap 4.x
4.x
5.x
alert
bootstrap alert
template
template
warning
5.x
original
4.x
original
success
5.x
original
4.x
original
danger
5.x
original
4.x
original
primary
5.x
original
4.x
original
info
5.x
original
4.x
original
callout
default
original
primary
original
warning
original
danger
original
succeed
original
info
original
kbd
or
or for html
border
[!NOTE|label:references:]
padding
border-style
font
references:
best fonts for developer
find fonts via image
selector
[!TIP|references:references] references:
Class selector :
.nameID selectors :
#nameAttribute selector :
[attr],[attr=value],[attr~=value],[attr|=value],[attr^=value],[attr$=value],[attr*=value]
Child combinator:
ul > liGeneral sibling combinator:
p ~ spanAdjacent sibling combinator:
h2 + pColumn combinator:
col || tdPseudo elements:
p::first-line[Pseudo-classes] (https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes)
Tree-structural pseudo-classes
:root
:first-child
:last-child
:hover
:active
attribute selectors
[attr]: Represents elements with an attribute name of attr.[attr=value]: Represents elements with an attribute name of attr whose value is exactly value.[attr~=value]: Represents elements with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly value.[attr|=value]: Represents elements with an attribute name of attr whose value can be exactly value or can begin with value immediately followed by a hyphen, - (U+002D). It is often used for language subcode matches.[attr^=value]: Represents elements with an attribute name of attr whose value is prefixed (preceded) by value.[attr$=value]: Represents elements with an attribute name of attr whose value is suffixed (followed) by value.[attr*=value]: Represents elements with an attribute name of attr whose value contains at least one occurrence of value within the string.example
another example
sample code
elegant way
debug tooltips in inspect
[!NOTE|label:references:]
select the element in the inspector
select
Event-Lisenerstab in right paneldelete the
mouseovereventre-hover the element in web page
references
| SELECTOR | EXAMPLE | EXAMPLE DESCRIPTION |
|---|---|---|
|
| Selects all elements with class="intro" |
|
| Selects all elements with both name1 and name2 set within its class attribute |
|
| Selects all elements with name2 that is a descendant of an element with name1 |
|
| Selects the element with id="firstname" |
|
| Selects all elements |
|
| Selects all |
|
| Selects all |
|
| Selects all |
|
| Selects all |
|
| Selects all |
|
| Selects the first |
|
| Selects every |
|
| Selects all elements with a target attribute |
|
| Selects all elements with target="_blank" |
|
| Selects all elements with a title attribute containing the word "flower" |
|
| Selects all elements with a lang attribute value equal to "en" or starting with "en-" |
|
| Selects every |
|
| Selects every |
|
| Selects every |
|
| Selects the active link |
|
| Insert something after the content of each |
|
| Insert something before the content of each |
|
| Selects every checked |
|
| Selects the default |
|
| Selects every disabled |
|
| Selects every |
|
| Selects every enabled |
|
| Selects every |
|
| Selects the first letter of every |
|
| Selects the first line of every |
|
| Selects every |
|
| Selects the input element which has focus |
|
| Selects the element that is in full-screen mode |
|
| Selects links on mouse over |
|
| Selects input elements with a value within a specified range |
|
| Selects input elements that are in an indeterminate state |
|
| Selects all input elements with an invalid value |
|
| Selects every |
|
| Selects every |
|
| Selects every |
|
| Selects all unvisited links |
|
| Selects the markers of list items |
|
| Selects every element that is not a |
|
| Selects every |
|
| Selects every |
|
| Selects every |
|
| Selects every |
|
| Selects every |
|
| Selects every |
|
| Selects input elements with no "required" attribute |
|
| Selects input elements with a value outside a specified range |
|
| Selects input elements with the "placeholder" attribute specified |
|
| Selects input elements with the "readonly" attribute specified |
|
| Selects input elements with the "readonly" attribute NOT specified |
|
| Selects input elements with the "required" attribute specified |
|
| Selects the document's root element |
|
| Selects the portion of an element that is selected by a user |
|
| Selects the current active #news element (clicked on a URL containing that anchor name) |
Last updated
