Search completed in 0.93 seconds.
455 results for "pseudo":
Your results are loading. Please wait...
Pseudo-classes and pseudo-elements - Learn web development
previous overview: building blocks next the next set of selectors we will look at are referred to as pseudo-classes and pseudo-elements.
... prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn about the pseudo-class and pseudo-element selectors.
... what is a pseudo-class?
...And 23 more matches
UI pseudo-classes - Learn web development
this included some usage of pseudo-classes, for example using :checked to target a checkbox only when it is selected.
... in this article, we will explore in detail the different ui pseudo-classes available to us in modern browsers for styling forms in different states.
... prerequisites: basic computer literacy, and a basic understanding of html and css, including general knowledge of pseudo-classes and pseudo-elements.
...And 32 more matches
CSSPseudoElement - Web APIs
the csspseudoelement interface represents a pseudo-element that may be the target of an event or animated using the web animations api.
... instances of this interface may be obtained by calling element.pseudo().
... properties csspseudoelement.element read only returns the originating/parent element of the pseudo-element.
...And 7 more matches
Pseudo-classes - CSS: Cascading Style Sheets
a css pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).
... /* any button over which the user's pointer is hovering */ button:hover { color: blue; } pseudo-classes let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on certain form elements), or the position of the mouse (like :hover, which lets you know if the mouse is over an element or not).
... note: in contrast to pseudo-classes, pseudo-elements can be used to style a specific part of an element.
...And 5 more matches
Pseudo-elements - CSS: Cascading Style Sheets
a css pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s).
...*/ p::first-line { color: blue; text-transform: uppercase; } note: in contrast to pseudo-elements, pseudo-classes can be used to style an element based on its state.
... syntax selector::pseudo-element { property: value; } you can use only one pseudo-element in a selector.
...And 4 more matches
CSSPseudoElement.element - Web APIs
the element read-only property of the csspseudoelement interface returns a reference to the originating element of the pseudo-element, in other words its parent element.
... syntax var originatingelement = csspseudoelement.element; value an element representing the pseudo-element's originating element.
... examples the example below demonstrates the relationship between csspseudoelement.element and element.pseudo(): const myelement = document.queryselector('q'); const csspseudoelement = myelement.pseudo('::after'); const originatingelement = csspseudoelement.element; console.log(myelement === originatingelement); // outputs true console.log(myelement.parentelement === originatingelement); // outputs false console.log(myelement.lastelementchild === csspseudoelement); // outputs false console.log(myelement.lastchild === csspseudoelement); // outputs false console.log(myelement.nextelementsibling === csspseudoelement); // outputs false console.log(myelement.nextsibling === csspseudoelement); // outputs false specifications specification status...
... comment css pseudo-elements level 4the definition of 'element' in that specification.
AnimationEvent.pseudoElement - Web APIs
summary the animationevent.pseudoelement read-only property is a domstring, starting with '::', containing the name of the pseudo-element the animation runs on.
... if the animation doesn't run on a pseudo-element but on the element, an empty string: ''.
... syntax name = animationevent.pseudoelement specifications specification status comment css animationsthe definition of 'animationevent.pseudoelement' in that specification.
TransitionEvent.pseudoElement - Web APIs
the transitionevent.pseudoelement read-only property is a domstring, starting with '::', containing the name of the pseudo-element the animation runs on.
... if the transition doesn't run on a pseudo-element but on the element, an empty string: ''.
... syntax name = transitionevent.pseudoelement specifications specification status comment css transitionsthe definition of 'transitionevent.pseudoelement' in that specification.
Pseudo-class - MDN Web Docs Glossary: Definitions of Web-related terms
in css, a pseudo-class selector targets elements depending on their state rather than on information from the document tree.
... learn more technical reference pseudo-class documentation ...
Pseudo-element - MDN Web Docs Glossary: Definitions of Web-related terms
in css, a pseudo-element selector applies styles to parts of your document content in scenarios where there isn't a specific html element to select.
... learn more technical reference pseudo-elements ...
Pseudocode - MDN Web Docs Glossary: Definitions of Web-related terms
pseudocode refers to code-like syntax that is generally used to indicate to humans how some code syntax works, or illustrate the design of an item of code architecture.
... learn more general knowledge pseudocode on wikipedia.
CSSPseudoElement.type - Web APIs
the type read-only property of the csspseudoelement interface returns the type of the pseudo-element as a string, represented in the form of a css selector.
... syntax var typeofpseudoelement = csspseudoelement.type; value a cssomstring containing one of the following values: "::before" "::after" "::marker" examples the example below demonstrates the relationship between csspseudoelement.type and element.pseudo(): const myelement = document.queryselector('q'); const myselector = '::after'; const csspseudoelement = myelement.pseudo(myselector); const typeofpseudoelement = csspseudoelement.type; console.log(myselector === typeofpseudoelement); // outputs true specifications specification status comment css pseudo-elements level 4the definition of 'type' in that specification.
Using the :target pseudo-class in selectors - CSS: Cascading Style Sheets
picking a target the pseudo-class :target is used to style the target element of a url containing a fragment identifier.
Index - Archive of obsolete content
2134 :-moz-full-screen-ancestor css, css:mozilla extensions, deprecated, non-standard, pseudo-class, reference, selector the :-moz-full-screen-ancestor css pseudo-class is a mozilla extension that represents all ancestors of the full-screen element, except containing frames in parent documents, which are the full-screen element in their own documents.
... however, those elements' ancestors have this pseudo-class applied to them.
... 2135 :-moz-system-metric() :-moz-system-metric, css, css:mozilla extensions, non-standard, obsolete, pseudo-class, selector this page was auto-generated because a user created a sub-page to this page.
...And 23 more matches
Client-side form validation - Learn web development
when an element is valid, the following things are true: the element matches the :valid css pseudo-class, which lets you apply a specific style to valid elements.
... when an element is invalid, the following things are true: the element matches the :invalid css pseudo-class, and sometimes other ui pseudo-classes (e.g., :out-of-range) depending on the error, which lets you apply a specific style to invalid elements.
...when this attribute is set, the element matches the :required ui pseudo-class and the form won't submit, displaying an error message on submission when the input is empty.
...And 16 more matches
inIDOMUtils
inherits from: nsisupports last changed in gecko 22.0 (firefox 22.0 / thunderbird 22.0 / seamonkey 2.19) implemented by: @mozilla.org/inspector/dom-utils;1 as a service: var inidomutils = components.classes["@mozilla.org/inspector/dom-utils;1"] .getservice(components.interfaces.inidomutils); method overview void addpseudoclasslock(in nsidomelement aelement, in domstring apseudoclass); void clearpseudoclasslocks(in nsidomelement aelement); [implicit_jscontext] jsval colornametorgb(in domstring acolorname); nsiarray getbindingurls(in nsidomelement aelement); nsidomnodelist getchildrenfornode(in nsidomnode anode, in boolean ashowinganonymouscontent); unsigned long long ge...
...tcontentstate(in nsidomelement aelement); void getcsspropertynames([optional] in unsigned long aflags, [optional] out unsigned long acount, [retval, array, size_is(acount)] out wstring aprops); nsisupportsarray getcssstylerules(in nsidomelement aelement, [optional] in domstring apseudo); nsidomnode getparentfornode(in nsidomnode anode, in boolean ashowinganonymouscontent); unsigned long getruleline(in nsidomcssstylerule arule); unsigned long getrulecolumn(in nsidomcssstylerule arule); unsigned long getselectorcount(in nsidomcssstylerule arule); astring getselectortext(in nsidomcssstylerule arule, in unsigned long aselectorindex); unsigned long long getspecificity(in nsidomcssstylerule arule, in unsigned long aselectorindex)...
...; nsidomfontfacelist getusedfontfaces(in nsidomrange arange); bool haspseudoclasslock(in nsidomelement aelement, in domstring apseudoclass); boolean isignorablewhitespace(in nsidomcharacterdata adatanode); bool isinheritedproperty(in astring apropertyname); void parsestylesheet(in nsidomcssstylesheet asheet, in domstring ainput); void removepseudoclasslock(in nsidomelement aelement, in domstring apseudoclass); astring rgbtocolorname(in octet ar, in octet ag, in octet ab); bool selectormatcheselement(in nsidomelement aelement, in nsidomcssstylerule arule, in unsigned long aselectorindex, [optional] in domstring apseudo); void setcontentstate(in nsidomelement aelement, in unsigned long long astate); constants...
...And 15 more matches
CSS - Archive of obsolete content
ArchiveWebCSS
pact inline content within block-level elements.-ms-wrap-marginthe -ms-wrap-margin css property is a microsoft extension that specifies a margin that offsets the inner wrap shape from other shapes.-ms-wrap-throughthe -ms-wrap-through css property is a microsoft extension that specifies how content should wrap around an exclusion element.:-moz-full-screen-ancestorthe :-moz-full-screen-ancestor css pseudo-class is a mozilla extension that represents all ancestors of the full-screen element, except containing frames in parent documents, which are the full-screen element in their own documents.
... however, those elements' ancestors have this pseudo-class applied to them.:-moz-system-metric()this page was auto-generated because a user created a sub-page to this page.::-ms-browsethe ::-ms-browse css pseudo-element is a microsoft extension that represents the button that opens the file picker of <input type="file">.::-ms-checkthe ::-ms-check css pseudo-element is a microsoft extension that represents checkboxes and radio button groups created by <input type="checkbox"> and <input type="radio">.::-ms-clearthe ::-ms-clear css pseudo-element creates a clear button at the edge of an <input type="text"> text control that clears the current value.
... this pseudo-element is non-standard, supported only in internet explorer 10, internet explorer 11, and microsoft edge.::-ms-expandthe ::-ms-expand css pseudo-element is a microsoft extension that represents the button of a <select> menu control that opens or closes the drop-down menu.
...And 9 more matches
Issues Arising From Arbitrary-Element hover - Archive of obsolete content
many authors make use of the css2 pseudo-class :hover to style their links.
... hover and non-link elements section 5.11.3 of css2 defines the three dynamic pseudo-classes (:hover, :active, and :focus) and then goes on to say: css doesn't define which elements may be in the above states, or how the states are entered and left.
... bare pseudo-classes the second piece of the problem comes when we consider the effects of a "bare" pseudo-class in a selector.
...And 8 more matches
:not() - CSS: Cascading Style Sheets
WebCSS:not
the :not() css pseudo-class represents elements that do not match a list of selectors.
... since it prevents specific items from being selected, it is known as the negation pseudo-class.
... /* selects any element that is not a paragraph */ :not(p) { color: blue; } the :not() pseudo-class has a number of quirks, tricks, and unexpected results that you should be aware of before using it.
...And 8 more matches
Index - Web APIs
WebAPIIndex
91 animationevent.pseudoelement api, animationevent, css, cssom, experimental, property, reference, web animations the animationevent.pseudoelement read-only property is a domstring, starting with '::', containing the name of the pseudo-element the animation runs on.
... if the animation doesn't run on a pseudo-element but on the element, an empty string: ''.
... 448 csspseudoelement api, csspseudoelement, element, experimental, interface, reference the csspseudoelement interface represents a pseudo-element that may be the target of an event or animated using the web animations api.
...And 7 more matches
/loader - Archive of obsolete content
in the sdk we call these "pseudo modules".
...ifferent ways: to expose an api that doesn't have a js file with an implementation or is written in an incompatible format such as jsm: let { loader } = require('toolkit/loader'); let loader = loader({ modules: { // require('net/utils') will get netutil.jsm 'net/utils': cu.import('resource:///modules/netutil.jsm', {}) } }); each loader instance comes with a set of built-in pseudo modules that are described in detail in the built-in modules section.
...for example in the sdk, the loader is loaded at bootstrap as a jsm module but is then exposed as a pseudo-module to avoid the overhead of subsequent loads: let loadermodule = cu.import('resource://gre/modules/commonjs/toolkit/loader.js'); let loader = loadermodule.loader({ modules: { // overlay `toolkit/loader` so that `require('toolkit/loader')` // will return our `loadermodule`.
...And 6 more matches
ValidityState - Web APIs
if true, the element matches the :invalid css pseudo-class.
...if true, the element matches the :invalid and :out-of-range and css pseudo-classes.
...if true, the element matches the :invalid and :out-of-range css pseudo-classes.
...And 6 more matches
Specificity - CSS: Cascading Style Sheets
selector types the following list of selector types increases by specificity: type selectors (e.g., h1) and pseudo-elements (e.g., ::before).
... class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover).
... universal selector (*), combinators (+, >, ~, ' ', ||) and negation pseudo-class (:not()) have no effect on specificity.
...And 6 more matches
create fancy boxes - Learn web development
its pseudo-element: ::before and ::after and some aside properties like: box-shadow, transform, outline, etc.
... pseudo-elements when styling a single box, you could find yourself limited and could wish to have more boxes to create even more amazing styles.
...one solution to avoid such pitfalls is to use css pseudo-elements.
...And 4 more matches
Styling links - Learn web development
previous overview: styling text next when styling links, it is important to understand how to make use of pseudo-classes to style link states effectively, and how to style links for use in common varied interface features such as navigation menus and tabs.
... link states the first thing to understand is the concept of link states — different states that links can exist in, which can be styled using different pseudo-classes: link (unvisited): the default state that a link resides in, when it isn't in any other state.
... this can be specifically styled using the :link pseudo class.
...And 4 more matches
Mozilla Style System Documentation
the css specification describes formatting objects that correspond to elements in the content model and formatting objects that correspond to pseudo-elements.
... (mozilla has a bunch of its pseudo-elements that are not in the css specification.) we also create style contexts for some things that are not css formatting objects: text nodes and placeholder frames.
... these three types of style contexts correspond to the three ways of creating a style context: nsiprescontext::resolvestylecontextfor, nsiprescontext::resolvepseudostylecontextfor, and.nsiprescontext::resolvestylecontextfornonelement there is also a fourth method, nsiprescontext::probepseudostylecontextfor, which creates a style context only if there are style rules that match the pseudo-element.
...And 4 more matches
Examine and edit HTML - Firefox Developer Tools
::before and ::after you can inspect pseudo-elements added using ::before and ::after: custom element definition when you open the inspector on a page that includes custom elements, you can view the class definition for the custom element in the debugger: inspect the element click on the word custom the source for the element's class will be displayed in the debugger.
... subtree modification attribute modification node removal use in console show dom properties show accessibility properties change pseudo-class hover active focus focus-within visited screenshot node scroll into view copy inner html outer html css selector css path xpath image data-url attribute paste inner html outer html before after as first child as last child expand all collapse all open link in new tab * open file in debugger * open file in...
... (change pseudo-class) hover set the :hover css pseudo-class.
...And 4 more matches
::after (:after) - CSS: Cascading Style Sheets
WebCSS::after
in css, ::after creates a pseudo-element that is the last child of the selected element.
... /* add an arrow after links */ a::after { content: "→"; } note: the pseudo-elements generated by ::before and ::after are contained by the element's formatting box, and thus don't apply to replaced elements such as <img>, or to <br> elements.
... syntax /* css3 syntax */ ::after /* css2 syntax */ :after note: css3 introduced the ::after notation (with two colons) to distinguish pseudo-classes from pseudo-elements.
...And 4 more matches
::before (:before) - CSS: Cascading Style Sheets
WebCSS::before
in css, ::before creates a pseudo-element that is the first child of the selected element.
... /* add a heart before links */ a::before { content: "♥"; } note: the pseudo-elements generated by ::before and ::after are contained by the element's formatting box, and thus don't apply to replaced elements such as <img>, or to <br> elements.
... syntax /* css3 syntax */ ::before /* css2 syntax */ :before note: css3 introduced the ::before notation (with two colons) to distinguish pseudo-classes from pseudo-elements.
...And 4 more matches
::first-letter (:first-letter) - CSS: Cascading Style Sheets
the ::first-letter css pseudo-element applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables).
...in these cases, both letters of the digraph should be matched by the ::first-letter pseudo-element.
... (this is poorly supported by browsers; see the browser compatibility table below.) a combination of the ::before pseudo-element and the content property may inject some text at the beginning of the element.
...And 4 more matches
:hover - CSS: Cascading Style Sheets
WebCSS:hover
the :hover css pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it.
... /* selects any <a> element when "hovered" */ a:hover { color: orange; } styles defined by the :active pseudo-class will be overridden by any subsequent link-related pseudo-class (:link, :visited, or :active) that has at least equal specificity.
... note: the :hover pseudo-class is problematic on touchscreens.
...And 4 more matches
:is() (:matches(), :any()) - CSS: Cascading Style Sheets
WebCSS:is
the :is() css pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list.
... note that currently browsers support this functionality as :matches(), or through an older, prefixed pseudo-class — :any(), including older versions of chrome, firefox, and safari.
...<subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!<combinator> = '>' | '+' | '~' | [ '|' ]where <type-selector> = <wq-name> | <ns-prefix>?
...And 4 more matches
:scope - CSS: Cascading Style Sheets
WebCSS:scope
the :scope css pseudo-class represents elements that are a reference point for selectors to match against.
... syntax :scope examples identity match in this simple example, we demonstrate that using the :scope pseudo-class from the element.matches() method matches the element on which it's called.
...</p> <p id="output"></p> result direct children a situation where the :scope pseudo-class prove to be useful is when you need to get direct descendant of an already retrieved element.
...And 4 more matches
:visited - CSS: Cascading Style Sheets
WebCSS:visited
the :visited css pseudo-class represents links that the user has already visited.
... /* selects any <a> that has been visited */ a:visited { color: green; } styles defined by the :visited pseudo-class will be overridden by any subsequent link-related pseudo-class (:link, :hover, or :active) that has at least equal specificity.
... styling restrictions for privacy reasons, browsers strictly limit which styles you can apply using this pseudo-class, and how they can be used: allowable css properties are color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, outline-color, text-decoration-color, and text-emphasis-color.
...And 4 more matches
Examples and demos from articles - Archive of obsolete content
[article] css pure-css dropdown menu [html] with the :hover pseudo-class you can create complex cascade algorithms.
....[article] pure-css web gallery based on the :hover pseudoclass [zip] you can use the :hover pseudo-class in order to build an image gallery with full-size images shown only when mouse goes over previews.
... .[article] pure-css web gallery based on the :checked pseudoclass [zip] you can also use the :checked pseudo-class applied to hidden radioboxes in order to build, for example, an image gallery with full-size images shown only when mouse clicks on previews.
...And 3 more matches
Examine and edit CSS - Firefox Developer Tools
you can: toggle pseudo-classes; toggle classes; add a new rule; change the display based on the color scheme preference (as of firefox 72, you must set devtools.inspector.color-scheme-simulation.enabled to true in the configuration editor to enable this feature); change the display based on print media rules.
... inactive rules (not shown): if a rule is inactive (e.g., padding on a :visited pseudo-element), it is colored gray, with an info icon that gives more information when clicked.
... displaying pseudo-elements the rule view displays the following pseudo-elements, if they are applied to the selected element: ::after ::backdrop ::before ::first-letter ::first-line ::selection :-moz-color-swatch :-moz-number-spin-box :-moz-number-spin-down :-moz-number-spin-up :-moz-number-text :-moz-number-wrapper :-moz-placeholder :-moz-progress-bar :-moz-range-progress :-moz-range-thumb :-moz...
...And 3 more matches
Window.getComputedStyle() - Web APIs
syntax var style = window.getcomputedstyle(element [, pseudoelt]); element the element for which to get the computed style.
... pseudoeltoptional a string specifying the pseudo-element to match.
... throws typeerror if the passed object is not an element or the pseudoelt is not a valid pseudo-element selector or is ::part() or ::slotted().
...And 3 more matches
:-moz-ui-invalid - CSS: Cascading Style Sheets
the :-moz-ui-invalid css pseudo-class represents any validated form element whose value isn't valid based on their validation constraints, in certain circumstances.
... this pseudo-class is applied according to the following rules: if the control does not have focus, and the value is invalid, apply this pseudo-class.
... if the control has focus, and the value was valid (including empty) when it gained focus, do not apply the pseudo-class.
...And 3 more matches
:checked - CSS: Cascading Style Sheets
WebCSS:checked
the :checked css pseudo-class selector represents any radio (<input type="radio">), checkbox (<input type="checkbox">), or option (<option> in a <select>) element that is checked or toggled to an on state.
... note: because browsers often treat <option>s as replaced elements, the extent to which they can be styled with the :checked pseudo-class varies from browser to browser.
...d; } /* radio element, when checked */ input[type="radio"]:checked { box-shadow: 0 0 0 3px orange; } /* checkbox element, when checked */ input[type="checkbox"]:checked { box-shadow: 0 0 0 3px hotpink; } /* option elements, when selected */ option:checked { box-shadow: 0 0 0 3px lime; color: red; } result toggling elements with a hidden checkbox this example utilizes the :checked pseudo-class to let the user toggle content based on the state of a checkbox, all without using javascript.
...And 3 more matches
:nth-last-child() - CSS: Cascading Style Sheets
the :nth-last-child() css pseudo-class matches elements based on their position among a group of siblings, counting from the end.
... /* selects every fourth element among any group of siblings, counting backwards from the last one */ :nth-last-child(4n) { color: lime; } note: this pseudo-class is essentially the same as :nth-child, except it counts items backwards from the end, not forwards from the beginning.
... syntax the nth-last-child pseudo-class is specified with a single argument, which represents the pattern for matching elements, counting from the end.
...And 3 more matches
CSS selectors - CSS: Cascading Style Sheets
pseudo pseudo classes the : pseudo allow the selection of elements based on state information that is not contained in the document tree.
... pseudo elements the :: pseudo represent entities that are not included in html.
... specifications specification status comment selectors level 4 working draft added the || column combinator, grid structural selectors, logical combinators, location, time-demensional, resource state, linguistic and ui pseudo-classes, modifier for ascii case-sensitive and case-insensitive attribute value selection.
...And 3 more matches
HTML attribute: required - HTML: Hypertext Markup Language
if present on any of these input types and elements, the :required pseudo class will match.
... if the attribute is not included, the :optional pseudo class will match.
... when an input has the required attribute, the :required pseudo-class also applies to it.
...And 3 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
WebHTMLElementinput
for 4.2 to be valid, step would have had to be set to any, 0.1, 0.2, or any the min value would have had to be a number ending in .2, such as <input type="number" min="-5.2"> note: when the data entered by the user doesn't adhere to the stepping configuration, the value is considered invalid in contraint validation and will match the :invalid pseudoclass.
...there are css selectors that can specification target form controls based on their ui features, also known as ui pseudo-classes.
... ui pseudo-classes captions super relevant to the <input> element: pseudo-class description :enabled any currently enabled element that can be activated (selected, clicked on, typed into, etc.) or accept focus and also has a disabled state, in which it can't be activated or accept focus.
...And 3 more matches
jspage - Archive of obsolete content
"};break;case"odd":e={a:2,b:0,special:"n"}; break;case"even":e={a:2,b:1,special:"n"};break;case"first":e={a:0,special:"index"};break;case"last":e={special:"last-child"};break;case"only":e={special:"only-child"}; break;default:e={a:(d-1),special:"index"};}return selectors.cache.nth[h]=e;},parseselector:function(e){if(selectors.cache.parsed[e]){return selectors.cache.parsed[e]; }var d,h={classes:[],pseudos:[],attributes:[]};while((d=selectors.regexps.combined.exec(e))){var i=d[1],g=d[2],f=d[3],b=d[5],c=d[6],j=d[7];if(i){h.classes.push(i); }else{if(c){var a=selectors.pseudo.get(c);if(a){h.pseudos.push({parser:a,argument:j});}else{h.attributes.push({name:c,operator:"=",value:j});}}else{if(g){h.attributes.push({name:g,operator:f,value:b}); }}}}if(!h.classes.length){delete h.classes;}if(!h.attributes.
...length){delete h.attributes;}if(!h.pseudos.length){delete h.pseudos;}if(!h.classes&&!h.attributes&&!h.pseudos){h=null; }return selectors.cache.parsed[e]=h;},parsetagandid:function(b){var a=b.match(selectors.regexps.tag);var c=b.match(selectors.regexps.id);return[(a)?a[1]:"*",(c)?c[1]:false]; },filter:function(f,c,e){var d;if(c.classes){for(d=c.classes.length;d--;d){var g=c.classes[d];if(!selectors.filters.byclass(f,g)){return false;}}}if(c.attributes){for(d=c.attributes.length; d--;d){var b=c.attributes[d];if(!selectors.filters.byattribute(f,b.name,b.operator,b.value)){return false;}}}if(c.pseudos){for(d=c.pseudos.length;d--;d){var a=c.pseudos[d]; if(!selectors.filters.bypseudo(f,a.parser,a.argument,e)){return false;}}}return true;},getbytagandid:function(b,a,d){if(d){var c=(b.getelementbyid)?b.
...extsibling)){if(b.nodetype==1){if(!selectors.utils.chk(b,d)){break;}if(selectors.filters.bytag(b,a)&&selectors.filters.byid(b,e)){c.push(b); }}}return c;}};selectors.filters={bytag:function(b,a){return(a=="*"||(b.tagname&&b.tagname.tolowercase()==a));},byid:function(a,b){return(!b||(a.id&&a.id==b)); },byclass:function(b,a){return(b.classname&&b.classname.contains&&b.classname.contains(a," "));},bypseudo:function(a,d,c,b){return d.call(a,c,b);},byattribute:function(c,d,b,e){var a=element.prototype.getproperty.call(c,d); if(!a){return(b=="!=");}if(!b||e==undefined){return true;}switch(b){case"=":return(a==e);case"*=":return(a.contains(e));case"^=":return(a.substr(0,e.length)==e); case"$=":return(a.substr(a.length-e.length)==e);case"!=":return(a!=e);case"~=":return a.contains(e," ");case"|=":return...
...And 2 more matches
Skinning XUL Files by Hand - Archive of obsolete content
as you will see, css provides a lot of flexibility for defining styles to individual elements, to classes of elements, to pseudo-classes, and to anonymous classes.
... css, but this is an extremely inefficient way to style xul, and is frowned upon in the mozilla development community (again, refer to the skinning guidelines in writing skinnable xul and css for more info); css2 also provides some new ways to group elements for styling, which we summarize briefly here, because they appear in mozilla with some frequency, but reserve for another article: pseudo-class parent-child element:pseudo-class { attribute: value; } parent > child { attribute: value; } button:hover { border: 1px; } menu#file > menuitem { font-weight: bold; } pseudo-classes reflect states of the element: when the mouse moves over a button, for example, the appropriate pseudo-class stylesheet rules are applied.
... note that for any one class of element, there may be several pseudo-classes andattribute selector styles defined.
...And 2 more matches
Advanced form styling - Learn web development
let's start by unstyling the original check boxes: input[type="checkbox"] { -webkit-appearance: none; appearance: none; } we can use the :checked and :disabled pseudo-classes to change the appearance of our custom checkbox as its state changes: input[type="checkbox"] { position: relative; width: 1em; height: 1em; border: 1px solid gray; /* adjusts the position of the checkboxes on the text baseline */ vertical-align: -2px; /* set here so that windows' high-contrast mode can override */ color: green; } input[type="checkbox"]::before { conten...
...t: "✔"; position: absolute; font-size: 1.2em; right: -1px; top: -0.3em; visibility: hidden; } input[type="checkbox"]:checked::before { /* use `visibility` instead of `display` to avoid recalculating layout */ visibility: visible; } input[type="checkbox"]:disabled { border-color: black; background: #ddd; color: gray; } you'll find more out about such pseudo-classes and more in the next article; the above ones do the following: :checked — the checkbox (or radio button) is in a checked state — the user has clicked/activated it.
...s case): input[type="range"] { appearance: none; -webkit-appearance: none; background: red; height: 2px; padding: 0; outline: 1px solid transparent; } however, it is very difficult to customize the style of the range control's drag handle — to get full control over range styling you'll need to use a whole bunch of complex css code, including multiple non-standard, browser-specific pseudo-elements.
...And 2 more matches
Styling web forms - Learn web development
note: there are some proprietary css pseudo-elements available that allow you to style internal components of these form controls, such as ::-moz-range-track, but these are not consistent across browsers, so can't be relied upon.
... as well as the basic css tools covered above, we've also been provided with several selectors — ui pseudo-classes — that enable styling based on the current state of the ui.
... we cover these in detail in the next article, ui pseudo-classes.
...And 2 more matches
Index - Learn web development
107 css selectors attribute, beginner, css, class, learn, pseudo, selectors, id in css, selectors are used to target the html elements on our web pages that we want to style.
... 110 pseudo-classes and pseudo-elements beginner, css, learn, pseudo, pseudo-class, pseudo-element, selectors the next set of selectors we will look at are referred to as pseudo-classes and pseudo-elements.
... 162 styling links article, beginner, css, focus, guide, learn, links, pseudo-class, hover, hyperlinks, menus, tabs we hope this article has provided you with all you'll need to know about links — for now!
...And 2 more matches
nsITreeView
each property, x, that the view gives back will cause the css ::moz-tree-cell-*(x) pseudoelement to be matched on the treechildren element.
...if the empty string is returned, the ::moz-tree-image pseudoelement will be used.
...it is multiplied by the width specified in the ::moz-tree-indentation pseudoelement to compute the exact indentation.
...And 2 more matches
Web Video Text Tracks Format (WebVTT) - Web APIs
3 00:02:25.000 --> 00:02:30.000 - ta en kopp styling webvtt cues you can style webvtt cues by looking for elements which match the ::cue pseudo-element.
... css pseudo-classes css pseudo classes allow us to classify the type of object which we want to differentiate from other types of objects.
...and css to classify the style for particular type of objects, but here these are used for styling and classifying the cues as shown below: webvtt 04:02.500 --> 04:05.000 j’ai commencé le basket à l'âge de 13, 14 ans 04:05.001 --> 04:07.800 sur les <i.foreignphrase><lang en>playground</lang></i>, ici à montpellier in the above example it can be observed that we can use the identifier and pseudo class name for defining the language of caption, where <i> tag is for italics.
...And 2 more matches
:active - CSS: Cascading Style Sheets
WebCSS:active
the :active css pseudo-class represents an element (such as a button) that is being activated by the user.
... /* selects any <a> that is being activated */ a:active { color: red; } the :active pseudo-class is commonly used on <a> and <button> elements.
... other common targets of this pseudo-class include elements that contain an activated element, and form elements that are being activated through their associated <label>.
...And 2 more matches
:invalid - CSS: Cascading Style Sheets
WebCSS:invalid
the :invalid css pseudo-class represents any <input> or other <form> element whose contents fail to validate.
... /* selects any invalid <input> */ input:invalid { background-color: pink; } this pseudo-class is useful for highlighting field errors for the user.
... mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.1 | w3c understanding wcag 2.0 notes radio buttons if any one of the radio buttons in a group is required, the :invalid pseudo-class is applied to all of them if none of the buttons in the group is selected.
...And 2 more matches
WebKit CSS extensions - CSS: Cascading Style Sheets
pseudo-classes :-webkit-animating-full-screen-transition :-webkit-any() :-webkit-any-link* :-webkit-autofill :-webkit-autofill-strong-password :-webkit-drag :-webkit-full-page-media :-webkit-full-screen* :-webkit-full-screen-ancestor :-webkit-full-screen-document :-webkit-full-screen-controls-hidden * now standard.
... note: if there is an invalid pseudo-class within in a chain or group of selectors, the whole selector list is invalid.
... pseudo-elements for web-compatibility reasons, blink, webkit, and gecko browsers treat all pseudo-elements starting with ::-webkit- as valid.
...And 2 more matches
content - CSS: Cascading Style Sheets
WebCSScontent
ute value */ content: attr(value string); /* language- and position-dependent keywords */ content: open-quote; content: close-quote; content: no-open-quote; content: no-close-quote; /* except for normal and none, several values can be used simultaneously */ content: open-quote chapter_counter; /* global values */ content: inherit; content: initial; content: unset; syntax values none the pseudo-element is not generated.
... normal computes to none for the ::before and ::after pseudo-elements.
...the generated text is the value of the innermost counter of the given name in scope at the given pseudo-element.
...And 2 more matches
disabled - HTML: Hypertext Markup Language
when a supporting element has the disabled attribute applied, the :disabled pseudo-class also applies to it.
... conversely, elements that support the disabled attribute but don't have the attribute set match the :enabled pseudo-class.
... if present on a supporting elements, the :disabled pseudo class will match.
...And 2 more matches
CSS3 - Archive of obsolete content
new pseudo-classes: :target, :enabled and :disabled, :checked, :indeterminate, :root, :nth-child and :nth-last-child, :nth-of-type and :nth-last-of-type, :last-child, :first-of-type and :last-of-type, :only-child and :only-of-type,:empty, and :not.
... pseudo-elements are now characterized by two colons rather than one: :after becomes ::after, :before becomes ::before, :first-letter becomes ::first-letter, and :first-line becomes ::first-line.
... allow the styling of forms according their content using the css :indeterminate, :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only, and :read-write pseudo-classes and the ::value, ::choices, ::repeat-item, and ::repeat-index pseudo-elements.
... at risk: due to insufficient browser support, standardization of the pseudo-elements ::value, ::choices, ::repeat-item, and ::repeat-index may be postponed to the next iteration of this module .
:-moz-system-metric() - Archive of obsolete content
note: since firefox 58, this pseudo-class is no longer available to web content — it is only available internally (e.g.
... syntax values -moz-windows-compositormedia: media/visual accepts min/max prefixes: no:-moz-system-metric(images-in-menus)the :-moz-system-metric(images-in-menus) css pseudo-class matches an element if the computer's user interface supports images in menus.:-moz-system-metric(mac-graphite-theme):-moz-system-metric(mac-graphite-theme) will match an element if the user has chosen the "graphite" appearance in the "appearance" prefpane of the mac os x system preferences.:-moz-system-metric(scrollbar-end-backward)the :-moz-system-metric(scrollbar-end-backward) css pseudo-class will match an element if the computer's user interface includes a backward arrow button at the end of scrollbars.:-moz-system-metric(scrollbar-end-forward)the :-moz-...
...system-metric(scrollbar-end-forward) css pseudo-class will match an element if the computer's user interface includes a forward arrow button at the end of scrollbars.:-moz-system-metric(scrollbar-start-backward)the :-moz-system-metric(scrollbar-start-backward) css pseudo-class will match an element if the computer's user interface includes a backward arrow button at the start of scrollbars.:-moz-system-metric(scrollbar-start-forward)the :-moz-system-metric(scrollbar-start-forward) css pseudo-class will match an element if the computer's user interface includes a forward arrow button at the start of scrollbars.:-moz-system-metric(scrollbar-thumb-proportional)the :-moz-system-metric(scrollbar-thumb-proportional) css pseudo-class will match an element if the computer's user interface uses proportio...
...nal scrollbar thumbs; that is, the draggable thumb on the scrollbar resizes to indicate the relative size of the visible area of the document.:-moz-system-metric(touch-enabled)the :-moz-system-metric(touch-enabled) css pseudo-class will match an element if the device on which the content is being rendered offers a supported touch-screen interface.:-moz-system-metric(windows-default-theme)the :-moz-system-metric(windows-default-theme) css pseudo-class matches an element if the user is currently using one of the following themes in windows: luna, royale, zune, or aero (i.e., vista basic, vista standard, or aero glass).
Index - MDN Web Docs Glossary: Definitions of Web-related terms
343 pseudo-class css, codingscripting, glossary, selector in css, a pseudo-class selector targets elements depending on their state rather than on information from the document tree.
... 344 pseudo-element css, codingscripting, glossary in css, a pseudo-element selector applies styles to parts of your document content in scenarios where there isn't a specific html element to select.
... 345 pseudocode codingscripting, glossary, pseudocode pseudocode refers to code-like syntax that is generally used to indicate to humans how some code syntax works, or illustrate the design of an item of code architecture.
... 362 random number generator codingscripting, glossary a prng (pseudorandom number generator) is an algorithm that outputs numbers in a complex, seemingly unpredictable pattern.
Cascade and inheritance - Learn web development
tens: score one in this column for each class selector, attribute selector, or pseudo-class contained inside the overall selector.
... ones: score one in this column for each element selector or pseudo-element contained inside the overall selector.
... note: the universal selector (*), combinators (+, >, ~, ' '), and negation pseudo-class (:not) have no effect on specificity.
... overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
CSS selectors - Learn web development
h1 { } it also includes selectors which target a class: .box { } or, an id: #unique { } attribute selectors this group of selectors gives you different ways to select elements based on the presence of a certain attribute on an element: a[title] { } or even make a selection based on the presence of an attribute with a particular value: a[href="https://example.com"] { } pseudo-classes and pseudo-elements this group of selectors includes pseudo-classes, which style certain states of an element.
... the :hover pseudo-class for example selects an element only when it is being hovered over by the mouse pointer: a:hover { } it also includes pseudo-elements, which select a certain part of an element rather than the element itself.
... selector example learn css tutorial type selector h1 { } type selectors universal selector * { } the universal selector class selector .box { } class selectors id selector #unique { } id selectors attribute selector a[title] { } attribute selectors pseudo-class selectors p:first-child { } pseudo-classes pseudo-element selectors p::first-line { } pseudo-elements descendant combinator article p descendant combinator child combinator article > p child combinator adjacent sibling combinator h1 + p adjacent sibling general sibling combinator h1 ~ p general sibling i...
...n this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
nsIDOMWindowUtils
windowwithid(in unsigned long long aouterwindowid); long getpccountscriptcount(); astring getpccountscriptsummary(in long ascript); astring getpccountscriptcontents(in long ascript); void getscrollxy(in boolean aflushlayout, out long ascrollx, out long ascrolly); astring getvisiteddependentcomputedstyle(in nsidomelement aelement, in astring apseudoelement, in astring apropertyname); boolean isinmodalstate(); void leavemodalstate(); void loadsheet(in nsiuri sheeturi, in unsigned long type); nsidomnodelist nodesfromrect(in float ax, in float ay, in float atopsize, in float arightsize, in float abottomsize, in float aleftsize, in boolean aignorerootscrollframe, in boolean aflushlayout); void pr...
...this number also counts restyling of pseudo-elements and anonymous boxes.
... ascrollx ascrolly getvisiteddependentcomputedstyle() perform the equivalent of: window.getcomputedstyle(aelement, apseudoelement).
... astring getvisiteddependentcomputedstyle( in nsidomelement aelement, in astring apseudoelement, in astring apropertyname ); parameters aelement apseudoelement apropertyname return value isinmodalstate() is the window is in a modal state?
DOM Inspector FAQ - Firefox Developer Tools
how do i inspect pseudo-classes and pseudo-elements in the css rules viewer?
... dom inspector allows you to force the :hover, :active, and :focus pseudo-classes to apply to a given node.
...you should notice the set pseudo-classes menu item, which will allow you to set the content state for the aforementioned pseudo-classes.
... there is currently no way to inspect dynamically-applied rules for other pseudo-classes or any pseudo-elements from the dom inspector ui.
KeyframeEffect - Web APIs
properties keyframeeffect.target gets and sets the element, or originating element of the pseudo-element, being animated by this object.
... this may be null for animations that do not target a specific element or pseudo-element.
... keyframeeffect.pseudoelement gets and sets the selector of the pseudo-element being animated by this object.
... this may be null for animations that do not target a pseudo-element.
Window.getDefaultComputedStyle() - Web APIs
syntax var style = window.getdefaultcomputedstyle(element [, pseudoelt]); parameters element the element for which to get the computed style.
... pseudoelt optional a string specifying the pseudo-element to match.
...container { position: absolute; left: 100px; top: 200px; height: 100px; } </style> <div id="elem-container">dummy</div> <div id="output"></div> <script> var elem = document.getelementbyid("elem-container"); var thecssprop = window.getdefaultcomputedstyle(elem).position; document.getelementbyid("output").innerhtml = thecssprop; // will output "static" </script> use with pseudo-elements the getdefaultcomputedstyle() method can pull style info from pseudo-elements (e.g., ::before or ::after).
...in particular, to avoid the so called css history leak security issue, browsers may expressly "lie" about the used value for a link and always return values as if a user has never visited the linked site, and/or limit the styles that can be applied using the :visited pseudo-selector.
::first-line (:first-line) - CSS: Cascading Style Sheets
the ::first-line css pseudo-element applies styles to the first line of a block-level element.
... /* selects the first line of a <p> */ p::first-line { color: red; } css3 introduced the ::first-line notation (with two colons) to distinguish pseudo-classes from pseudo-elements.
... allowable properties only a small subset of css properties can be used with the ::first-line pseudo-element: all font-related properties: font, font-kerning, font-style, font-variant, font-variant-numeric, font-variant-position, font-variant-east-asian, font-variant-caps, font-variant-alternates, font-variant-ligatures, font-synthesis, font-feature-settings, font-language-override, font-weight, font-size, font-size-adjust, font-stretch, and font-family all background-related properties: background-color, background-clip, background-image, background-origin, background-position, background-repeat, background-size, background-attachment, and background-blend-mode the color property word-spacing, letter-spacing, text-decoration, text-...
...see what i mean?</p> <span>the first line of this text will not receive special styling because it is not a block-level element.</span> css ::first-line { color: blue; text-transform: uppercase; /* warning: do not use these */ /* many properties are invalid in ::first-line pseudo-elements */ margin-left: 20px; text-indent: 20px; } result specifications specification status comment css pseudo-elements level 4the definition of '::first-line' in that specification.
::slotted() - CSS: Cascading Style Sheets
WebCSS::slotted
the ::slotted() css pseudo-element represents any element that has been placed into a slot inside an html template (see using templates and slots for more information).
...<subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!where <type-selector> = <wq-name> | <ns-prefix>?
... '*'<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector><pseudo-element-selector> = ':' <pseudo-class-selector><pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'where <wq-name> = <ns-prefix>?
...'='<attr-modifier> = i | s examples highlighting slotted elements the following snippets are taken from our slotted-pseudo-element demo (see it live also).
:dir() - CSS: Cascading Style Sheets
WebCSS:dir
the :dir() css pseudo-class matches elements based on the directionality of the text contained in them.
... /* selects any element with right-to-left text */ :dir(rtl) { background-color: red; } the :dir() pseudo-class uses only the semantic value of the directionality, i.e., the one defined in the document itself.
... note: be aware that the behavior of the :dir() pseudo-class is not equivalent to the [dir=…] attribute selectors.
... syntax the :dir() pseudo-class requires one parameter, representing the text directionality you want to target.
:empty - CSS: Cascading Style Sheets
WebCSS:empty
the :empty css pseudo-class represents any element that has no children.
... note: in selectors level 4 the :empty pseudo-class was changed to act like :-moz-only-whitespace, but no browser currently supports this yet.
...| the paciello group hidden content for better a11y | go make things mdn understanding wcag, guideline 2.4 explanations understanding success criterion 2.4.4 | w3c understanding wcag 2.0 specifications specification status comment selectors level 4the definition of 'the :empty pseudo-class' in that specification.
... selectors level 3the definition of 'the :empty pseudo-class' in that specification.
:fullscreen - CSS: Cascading Style Sheets
the :fullscreen css pseudo-class matches every element which is currently in full-screen mode.
... syntax :fullscreen usage notes the :fullscreen pseudo-class lets you configure your stylesheets to automatically adjust the size, style, or layout of content when elements switch back and forth between full-screen and traditional presentations.
... html the page's html looks like this: <h1>mdn web docs demo: :fullscreen pseudo-class</h1> <p>this demo uses the <code>:fullscreen</code> pseudo-class to automatically change the style of a button used to toggle full-screen mode on and off, entirely using css.</p> <button id="fs-toggle">toggle fullscreen</button> the <button> with the id "fs-toggle" will change between pale red and pale green depending on whether or not the document is in full-screen mode.
...the key is the use of the :not(:fullscreen), which looks for the element to not have the :fullscreen pseudo-class applied to it.
:has() - CSS: Cascading Style Sheets
WebCSS:has
the :has() css pseudo-class represents an element if any of the selectors passed as parameters (relative to the :scope of the given element) match at least one element.
...<subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!where <type-selector> = <wq-name> | <ns-prefix>?
... '*'<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector><pseudo-element-selector> = ':' <pseudo-class-selector><pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'where <wq-name> = <ns-prefix>?
...'='<attr-modifier> = i | s description the :has() pseudo-class takes a relative selector list as an argument.
:nth-child() - CSS: Cascading Style Sheets
the :nth-child() css pseudo-class matches elements based on their position in a group of siblings.
... /* selects the second <li> element in a list */ li:nth-child(2) { color: lime; } /* selects every fourth element among any group of siblings */ :nth-child(4n) { color: lime; } syntax the nth-child pseudo-class is specified with a single argument that describes a pattern for matching element indices in a list of siblings.
...<subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!<combinator> = '>' | '+' | '~' | [ '|' ]where <type-selector> = <wq-name> | <ns-prefix>?
... '*'<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector><pseudo-element-selector> = ':' <pseudo-class-selector><pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'where <wq-name> = <ns-prefix>?
:target - CSS: Cascading Style Sheets
WebCSS:target
the :target css pseudo-class represents a unique element (the target element) with an id matching the url's fragment.
... { border: 2px solid black; } for example, the following url has a fragment (denoted by the # sign) that points to an element called section2: http://www.example.com/index.html#section2 the following element would be selected by a :target selector when the current url is equal to the above: <section id="section2">example</section> syntax :target examples a table of contents the :target pseudo-class can be used to highlight the portion of a page that has been linked to from a table of contents.
...isn't that delightful?</p> css p:target { background-color: gold; } /* add a pseudo-element inside the target element */ p:target::before { font: 70% sans-serif; content: "►"; color: limegreen; margin-right: .25em; } /* style italic elements within the target element */ p:target i { color: red; } result pure-css lightbox you can use the :target pseudo-class to create a lightbox without using any javascript.
... note: a more complete pure-css lightbox based on the :target pseudo-class is available on github (demo).
CSS reference - CSS: Cascading Style Sheets
WebCSSReference
use this css reference to browse an alphabetical index of all of the standard css properties, pseudo-classes, pseudo-elements, data types, and at-rules.
...where : selectors-list ::= selector[:pseudo-class] [::pseudo-element] [, selectors-list] properties-list ::= [property : value] [; properties-list] see the index of selectors, pseudo-classes, and pseudo-elements below.
... pseudo pseudo classes : specifies a special state of the selected element(s).
... pseudo elements :: represents entities that are not included in html.
Constraint validation - Developer guides
(this is typically done by the user-agent when determining which of the css pseudo-classes, :valid or :invalid, applies.) in contrast, the reportvalidity() method reports any constraint failures to the user.
... controlling the look of elements the look of elements can be controlled via css pseudo-classes.
... :required and :optional css pseudo-classes the :required and :optional pseudo-classes allow writing selectors that match form elements that have the required attribute, or that don't have it.
... :placeholder-shown css pseudo-class see :placeholder-shown :valid :invalid css pseudo-classes the :valid and :invalid pseudo-classes are used to represent <input> elements whose content validates and fails to validate respectively according to the input's type setting.
HTML attribute: readonly - HTML: Hypertext Markup Language
if present on any of these input types and elements, the :read-only pseudo class will match.
... if the attribute is not included, the :read-write pseudo class will match.
... when an input has the readonly attribute, the :read-only pseudo-class also applies to it.
... conversely, inputs that support the readonly attribute but don't have the attribute set match the :read-write pseudo-class.
Style System Overview - Archive of obsolete content
has a separate rulesmatching method for pseudo-elements.
...(important advice for chrome css authors.) pseudo-elements are hashed in element hash, so for matching pseudo-elements we only need one hashtable lookup.
... resolvepseudostylecontextfor: for pseudo-elements (:first-letter, :before, etc.) resolvestylecontextfornonelement: skips rule matching and uses root rule node (text frame optimization) managing style contexts style context resolving functions will walk the rule processors in stylesetimpl::filerules, find the correct rule node, and find a current child of the parent (“sibling sharing”) or creat...
:-moz-full-screen-ancestor - Archive of obsolete content
the :-moz-full-screen-ancestor css pseudo-class is a mozilla extension that represents all ancestors of the full-screen element, except containing frames in parent documents, which are the full-screen element in their own documents.
... however, those elements' ancestors have this pseudo-class applied to them.
... this pseudo-class was removed in firefox 50.
::-ms-fill - Archive of obsolete content
the ::-ms-fill css pseudo-element is a microsoft extension that represents a progress bar displayed by <progress>.
... this pseudo-element is available only in internet explorer 10, internet explorer 11, and microsoft edge.
...an indeterminate progress bar can be selected with the :indeterminate pseudo-class.) by default, internet explorer and edge display a moving dots animation for an indeterminate progress bar.
Mozilla XForms Specials - Archive of obsolete content
pseudo-class support we currently support all the css pseudo-classes in xforms (:enabled, :disabled, etc.
...(limitation tracked in bug 313111)pseudo element support there is no support for the pseudo elements (::value, ::repeat-item, and ::repeat-index ).
...} the pseudo elements are defined in the css3 basic user interface specification .
Basic native form controls - Learn web development
the following screenshots show default, focused and disabled checkboxes in firefox 71 and safari 13 on macos and chrome 79 and edge 18 on windows 10: note: any checkboxes and radio buttons with the checked attribute on load match the :default pseudo class, even if they are no longer checked.
... any that are currently checked match the :checked pseudoclass.
... previous overview: forms next in this module your first form how to structure a web form basic native form controls the html5 input types other form controls styling web forms advanced form styling ui pseudo-classes client-side form validation sending form data advanced topics how to build custom form controls sending forms through javascript property compatibility table for form widgets ...
Test your skills: Advanced styling - Learn web development
this aim of this skill test is to assess whether you've understood our advanced form styling and ui pseudo-classes articles.
... advanced form styling 3 in our final task for this assessment series, we provide you with a feedback form that is already nicely-styled — you've already seen something similar if you've worked through our ui pseudo-classes article, and now we want you to come up with your own solution.
... what we'd like you to do is make use of some advanced pseudo-classes to provide some useful indicators of validity.
Making decisions in your code — conditionals - Learn web development
else syntax basic if...else syntax looks like the following in pseudocode: if (condition) { code to run if condition is true } else { run some other code instead } here we've got: the keyword if followed by some parentheses.
...here's some more pseudocode, to give you an idea: switch (expression) { case choice1: run this code break; case choice2: run this code instead break; // include as many cases as you like default: actually, just run this code } here we've got: the keyword switch, followed by a set of parentheses.
...the pseudocode looks like this: ( condition ) ?
Chrome-only CSS reference
MozillaGeckoChromeCSS
it only works in chrome code, and only on mac os x.:-moz-lwthemethe :-moz-lwtheme pseudo-class matches in chrome documents when the root element's lightweightthemes attribute is true and a theme is selected.:-moz-lwtheme-brighttextthe :-moz-lwtheme-brighttext pseudo-class matches in chrome documents when :-moz-lwtheme is true and a lightweight theme with a bright text color is selected.:-moz-lwtheme-darktextthe :-moz-lwtheme-darktext pseudo-class matches in chrome documents when :-mo...
...z-lwtheme is true and a lightweight theme with a dark text color is selected.::-moz-tree-cellactivated by the properties attribute.::-moz-tree-cell-textactivated by the properties attribute.::-moz-tree-cell-text(hover)the :-moz-tree-cell-text(hover) css pseudo-class will match an element if the mouse cursor is presently hovering over text in a tree cell.::-moz-tree-columnactivated by the properties attribute.::-moz-tree-drop-feedbackactivated by the properties attribute.::-moz-tree-imageactivated by the properties attribute.::-moz-tree-indentationactivated by the properties attribute.::-moz-tree-lineactivated by the properties attribute.::-moz-tree-progressmeteractivated when the type attribute is set to progressmeter.
... ::-moz-tree-rowthe ::-moz-tree-row css pseudo-element is used to select rows and apply styles to tree rows.::-moz-tree-row(hover)the ::-moz-tree-row(hover) css pseudo-class will match an element if the mouse cursor is presently hovering over a tree row.::-moz-tree-separatoractivated by the properties attribute.::-moz-tree-twistyactivated by the properties attribute.css -moz-bool-pref() @supports functionthe -moz-bool-pref() @supports condition is available to gecko chrome and ua stylesheets to check if a boolean preference is enabled.css <display-xul> component</display-xul>firefox supports the following -moz- prefixed xul display values:overflow-clip-boxthe overflow-clip-box css property specifies relative to which box the clipping happens when there is an overflow.
Mozilla Quirks Mode Behavior
the :hover and :active pseudo-classes will only be applied to links, and only if there is no other pseudo-class in the selector.
... prior to gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3), there was no class check, so the :hover pseudoclass was not applied to class selectors; for example, .someclass:hover did not work.
... prior to gecko 36, the quirk was also applied if another pseudo-class was used in the same selector, if a pseudo-element was used in the selector, or if it was part of a pseudo-class argument (bug 783213).
JIT Optimization Strategies
the following pseudocode describes the kind of machine code generated by this optimization: if obj.shape == shape1 then obj.slots[0] elif obj.shape == shape2 then obj.slots[5] elif obj.shape == shape3 then obj.slots[2] ...
...the following pseudocode describes the kind of machine code generated by this optimization: if obj.shape == shape1 then obj.slots[0] = val elif obj.shape == shape2 then obj.slots[5] = val elif obj.shape == shape3 then obj.slots[2] = val ...
... consider the following: function foo(arg) { return bar(arg, 3); } function bar() { return arguments[0] + arguments[1]; } in the above case, if foo is compiled with ion, and the call to bar is inlined, then this optimization can transform the entire procedure to the following pseudo-code: compiled foo(arg): // inlined call to bar(arg, 3) { return arg + 3; // } getelem_inlinecache this is the worst-case scenario for an element access optimization.
Parser API
expressions interface xmlanyname <: expression { type: "xmlanyname"; } the special e4x wildcard pseudo-identifier *.
... interface xmlqualifiedidentifier <: expression { type: "xmlqualifiedidentifier"; left: identifier | xmlanyname; right: identifier | expression; computed: boolean; } an e4x qualified identifier, i.e., a pseudo-identifier using the namespace separator ::.
... expressions xmlanyname([loc]) loc: sourcelocation returns: customxmlanyname/customxml/customexpression callback to produce a custom xml node for the wildcard pseudo-identifier *.
nsIAccessNode
method overview nsiaccessnode getchildnodeat(in long childnum); obsolete since gecko 2.0 nsidomcssprimitivevalue getcomputedstylecssvalue(in domstring pseudoelt, in domstring propertyname); domstring getcomputedstylevalue(in domstring pseudoelt, in domstring propertyname); void scrollto(in unsigned long ascrolltype); void scrolltopoint(in unsigned long acoordinatetype, in long ax, in long ay); attributes note: attempting to access the attributes of a node that is unattached from the accessible tree will result in ...
... nsidomcssprimitivevalue getcomputedstylecssvalue( in domstring pseudoelt, in domstring propertyname ); parameters pseudoelt the pseudo element to retrieve style for, or empty string for general computed style information for the node.
... domstring getcomputedstylevalue( in domstring pseudoelt, in domstring propertyname ); parameters pseudoelt the pseudo element to retrieve style for, or null for general computed style information for this node.
Migrating from Firebug - Firefox Developer Tools
toggle pseudo-classes firebug lets you toggle the css pseudo-classes :hover, :active and :focus for an element via the options menu of the style side panel.
...the first one is to toggle them via the pseudo-class panel within the rules side panel.
... the second one is to right-click and element within the node view and toggle the pseudo-classes via the context menu.
AnimationEvent() - Web APIs
syntax animationevent = new animationevent(type, {animationname: apropertyname, elapsedtime : afloat, pseudoelement: apseudoelementname}); parameters the animationevent() constructor also inherits arguments from event().
... pseudoelement optional is a domstring, starting with "::", containing the name of the pseudo-element the animation runs on.
... if the animation doesn't run on a pseudo-element but on the element itself, specify an empty string: "".
Crypto.getRandomValues() - Web APIs
to guarantee enough performance, implementations are not using a truly random number generator, but they are using a pseudo-random number generator seeded with a value with enough entropy.
... the pseudo-random number generator algorithm (prng) may vary across user agents, but is suitable for cryptographic purposes.
...user agents are instead urged to provide the best entropy they can when generating random numbers, using a well-defined, efficient pseudorandom number generator built into the user agent itself, but seeded with values taken from an external source of pseudorandom numbers, such as a platform-specific random number function, the unix /dev/urandom device, or other source of random or pseudorandom data.
Element - Web APIs
WebAPIElement
element.pseudo() returns a csspseudoelement representing the child pseudo-element matched by the specified pseudo-element selector.
... also available via the ontouchstart property specifications specification status comment css pseudo-elements level 4the definition of 'element' in that specification.
... working draft added the pseudo() method.
Drag Operations - Web APIs
for simple highlighting, you can use the :-moz-drag-over css pseudoclass on a drop target.
... note: you must cancel the dragenter event for this pseudoclass to apply, as this state is not checked for the dragover event.
...any highlighting or other visual effects specified using the :-moz-drag-over pseudoclass will be removed automatically.
TransitionEvent() - Web APIs
syntax transitionevent = new transitionevent(type, {propertyname: apropertyname, elapsedtime : afloat, pseudoelement: apseudoelementname}); arguments the transitionevent() constructor also inherits arguments from event().
... pseudoelement optional is a domstring, starting with "::", containing the name of the pseudo-element the animation runs on.
... if the animation doesn't run on a pseudo-element but on the element, an empty string: "".
:-moz-ui-valid - CSS: Cascading Style Sheets
the :-moz-ui-valid css pseudo-class represents any validated form element whose value validates correctly based on its validation constraints.
... this pseudo-class is applied according to the following rules: if the control does not have focus, and the value is valid, apply this pseudo-class.
... if the control has focus, and the value was valid (including empty) when it gained focus, apply this pseudo-class.
::-webkit-progress-bar - CSS: Cascading Style Sheets
the ::-webkit-progress-bar css pseudo-element represents the entire bar of a <progress> element.
... normally it's only visible as the unfilled portion of the bar, since by default it's rendered below the ::-webkit-progress-value pseudo-element.
... it is a child of the ::-webkit-progress-inner-element pseudo-element and the parent of the ::-webkit-progress-value pseudo-element.
::backdrop - CSS: Cascading Style Sheets
the ::backdrop css pseudo-element is a box the size of the viewport which is rendered immediately beneath any element being presented in full-screen mode.
...the ::backdrop pseudo-element makes it possible to obscure, style, or completely hide everything located below the element when it's the topmost one in the top layer.
...no restrictions are made on what properties apply to this pseudo-element.
::marker - CSS: Cascading Style Sheets
WebCSS::marker
the ::marker css pseudo-element selects the marker box of a list item, which typically contains a bullet or number.
... it works on any element or pseudo-element set to display: list-item, such as the <li> and <summary> elements.
... syntax ::marker examples html <ul> <li>peaches</li> <li>apples</li> <li>plums</li> </ul> css ul li::marker { color: red; font-size: 1.5em; } result specifications specification status comment css pseudo-elements level 4the definition of '::marker' in that specification.
::placeholder - CSS: Cascading Style Sheets
the ::placeholder css pseudo-element represents the placeholder text in an <input> or <textarea> element.
... ::placeholder { color: blue; font-size: 1.5em; } only the subset of css properties that apply to the ::first-line pseudo-element can be used in a rule using ::placeholder in its selector.
...e harmful — nielsen norman group examples red text html <input placeholder="type something here!"> css input::placeholder { color: red; font-size: 1.2em; font-style: italic; } result green text html <input placeholder="type something here..."> css input::placeholder { color: green; } result specifications specification status comment css pseudo-elements level 4the definition of '::placeholder' in that specification.
::selection - CSS: Cascading Style Sheets
the ::selection css pseudo-element applies styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text).
...(wcag defines large text as between 18.66px and 24px and bold, or 24px or larger.) webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 specifications specification status comment css pseudo-elements level 4the definition of '::selection' in that specification.
...it returned in pseudo-elements level 4.
:host() - CSS: Cascading Style Sheets
WebCSS:host()
the :host() css pseudo-class function selects the shadow host of the shadow dom containing the css it is used inside (so you can select a custom element from inside its shadow dom) — but only if the selector given as the function's parameter matches the shadow host.
...<subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!where <type-selector> = <wq-name> | <ns-prefix>?
... '*'<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector><pseudo-element-selector> = ':' <pseudo-class-selector><pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'where <wq-name> = <ns-prefix>?
:host-context() - CSS: Cascading Style Sheets
the :host-context() css pseudo-class function selects the shadow host of the shadow dom containing the css it is used inside (so you can select a custom element from inside its shadow dom) — but only if the selector given as the function's parameter matches the shadow host's ancestor(s) in the place it sits inside the dom hierarchy.
...<subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!where <type-selector> = <wq-name> | <ns-prefix>?
... '*'<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector><pseudo-element-selector> = ':' <pseudo-class-selector><pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'where <wq-name> = <ns-prefix>?
:in-range - CSS: Cascading Style Sheets
WebCSS:in-range
the :in-range css pseudo-class represents an <input> element whose current value is within the range limits specified by the min and max attributes.
... /* selects any <input>, but only when it has a range specified, and its value is inside that range */ input:in-range { background-color: rgba(0, 255, 0, 0.25); } this pseudo-class is useful for giving the user a visual indication that a field's current value is within the permitted limits.
... note: this pseudo-class only applies to elements that have (and can take) a range limitation.
:nth-last-of-type() - CSS: Cascading Style Sheets
the :nth-last-of-type() css pseudo-class matches elements of a given type, based on their position among a group of siblings, counting from the end.
... /* selects every fourth <p> element among any group of siblings, counting backwards from the last one */ p:nth-last-of-type(4n) { color: lime; } note: this pseudo-class is essentially the same as :nth-of-type, except it counts items backwards from the end, not forwards from the beginning.
... syntax the nth-last-of-type pseudo-class is specified with a single argument, which represents the pattern for matching elements, counting from the end.
:optional - CSS: Cascading Style Sheets
WebCSS:optional
the :optional css pseudo-class represents any <input>, <select>, or <textarea> element that does not have the required attribute set on it.
... /* selects any optional <input> */ input:optional { border: 1px dashed black; } this pseudo-class is useful for styling fields that are not required to submit a form.
... note: the :required pseudo-class selects required form fields.
:out-of-range - CSS: Cascading Style Sheets
the :out-of-range css pseudo-class represents an <input> element whose current value is outside the range limits specified by the min and max attributes.
... /* selects any <input>, but only when it has a range specified, and its value is outside that range */ input:out-of-range { background-color: rgba(255, 0, 0, 0.25); } this pseudo-class is useful for giving the user a visual indication that a field's current value is outside the permitted limits.
... note: this pseudo-class only applies to elements that have (and can take) a range limitation.
:read-only - CSS: Cascading Style Sheets
the :read-only css pseudo-class represents an element (such as input or textarea) that is not editable by the user.
... the :read-only pseudo-class is used to remove all the styling that makes the inputs look like clickable fields, making them look more like read-only paragraphs.the :read-write pseudo-class on the other hand is used to provide some nicer styling to the editable <textarea>.
... working draft defines the pseudo-class, but not the associated semantics.
:read-write - CSS: Cascading Style Sheets
the :read-write css pseudo-class represents an element (such as input or textarea) that is editable by the user.
... the :read-only pseudo-class is used to remove all the styling that makes the inputs look like clickable fields, making them look more like read-only paragraphs.the :read-write pseudo-class on the other hand is used to provide some nicer styling to the editable <textarea>.
... working draft defines the pseudo-class, but not the associated semantics.
:required - CSS: Cascading Style Sheets
WebCSS:required
the :required css pseudo-class represents any <input>, <select>, or <textarea> element that has the required attribute set on it.
... /* selects any required <input> */ input:required { border: 1px dashed red; } this pseudo-class is useful for highlighting fields that must have valid data before a form can be submitted.
... note: the :optional pseudo-class selects optional form fields.
:where() - CSS: Cascading Style Sheets
WebCSS:where
the :where() css pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list.
...<subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!<combinator> = '>' | '+' | '~' | [ '|' ]where <type-selector> = <wq-name> | <ns-prefix>?
... '*'<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector><pseudo-element-selector> = ':' <pseudo-class-selector><pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'where <wq-name> = <ns-prefix>?
Mozilla CSS extensions - CSS: Cascading Style Sheets
mozilla applications such as firefox support a number of special mozilla extensions to css, including properties, values, pseudo-elements and pseudo-classes, at-rules, and media queries.
... mozilla-only properties and pseudo-classes (avoid using on websites) note: these properties and pseudo-classes will only work in mozilla applications such as firefox, and are not on a standards track.
...nformal -moz-urdu overflow -moz-scrollbars-none -moz-scrollbars-horizontal -moz-scrollbars-vertical -moz-hidden-unscrollable text-align -moz-center -moz-left -moz-right text-decoration -moz-anchor-decoration -moz-user-select -moz-all -moz-none width, min-width, and max-width -moz-min-content -moz-fit-content -moz-max-content -moz-available pseudo-elements and pseudo-classes a – d ::-moz-anonymous-block eg@:- bug 331432 ::-moz-anonymous-positioned-block :-moz-any :-moz-any-link [matches :link and :visited] :-moz-broken ::-moz-canvas ::-moz-color-swatch ::-moz-cell-content :-moz-drag-over f – i :-moz-first-node ::-moz-focus-inner ::-moz-focus-outer :-moz-focusring :-moz-full-screen :-moz-full-screen-ancesto...
<body>: The Document Body element - HTML: Hypertext Markup Language
WebHTMLElementbody
this method is non-conforming, use css color property in conjunction with the :active pseudo-class instead.
...this method is non-conforming, use css color property in conjunction with the :link pseudo-class instead.
...this method is non-conforming, use css color property in conjunction with the :visited pseudo-class instead.
Web Components
css pseudo-classes pseudo-classes relating specifically to custom elements: :defined: matches any element that is defined, including built in elements and custom elements defined with customelementregistry.define()).
... css pseudo-elements pseudo-elements relating specifically to custom elements: ::part: represents any element within a shadow tree that has a matching part attribute.
... css pseudo-elements pseudo-elements relating specifically to slots: ::slotted: matches any content that is inserted into a slot.
Content states and the style system - Archive of obsolete content
this is done by walking the list of all css2.1 simple selectors in all style sheets applied to the page that have a state-dependent pseudo-class as part of the selector.
... the way we determine whether the selector might have stopped or started matching the node is by just checking whether it matches with the caveat that all the state-dependent pseudo-classes corresponding to the states that changed must be treated as matching (whether they actually do and whether they're negated or not).
Styling a Tree - Archive of obsolete content
however, css has a concept to access parts of elements considering them to be pseudo-elements.
... this selector matches some tree rows inside the treechildren element as pseudo-elements.
:-moz-system-metric(images-in-menus) - Archive of obsolete content
the :-moz-system-metric(images-in-menus) css pseudo-class matches an element if the computer's user interface supports images in menus.
... note: since firefox 58, this pseudo-class is no longer available to web content — it is only available internally (e.g.
:-moz-system-metric(scrollbar-end-backward) - Archive of obsolete content
the :-moz-system-metric(scrollbar-end-backward) css pseudo-class will match an element if the computer's user interface includes a backward arrow button at the end of scrollbars.
... note: since firefox 58, this pseudo-class is no longer available to web content — it is only available internally (e.g.
:-moz-system-metric(scrollbar-end-forward) - Archive of obsolete content
the :-moz-system-metric(scrollbar-end-forward) css pseudo-class will match an element if the computer's user interface includes a forward arrow button at the end of scrollbars.
... note: since firefox 58, this pseudo-class is no longer available to web content — it is only available internally (e.g.
:-moz-system-metric(scrollbar-start-backward) - Archive of obsolete content
the :-moz-system-metric(scrollbar-start-backward) css pseudo-class will match an element if the computer's user interface includes a backward arrow button at the start of scrollbars.
... note: since firefox 58, this pseudo-class is no longer available to web content — it is only available internally (e.g.
:-moz-system-metric(scrollbar-start-forward) - Archive of obsolete content
the :-moz-system-metric(scrollbar-start-forward) css pseudo-class will match an element if the computer's user interface includes a forward arrow button at the start of scrollbars.
... note: since firefox 58, this pseudo-class is no longer available to web content — it is only available internally (e.g.
:-moz-system-metric(scrollbar-thumb-proportional) - Archive of obsolete content
the :-moz-system-metric(scrollbar-thumb-proportional) css pseudo-class will match an element if the computer's user interface uses proportional scrollbar thumbs; that is, the draggable thumb on the scrollbar resizes to indicate the relative size of the visible area of the document.
... note: since firefox 58, this pseudo-class is no longer available to web content — it is only available internally (e.g.
:-moz-system-metric(touch-enabled) - Archive of obsolete content
the :-moz-system-metric(touch-enabled) css pseudo-class will match an element if the device on which the content is being rendered offers a supported touch-screen interface.
... note: since firefox 58, this pseudo-class is no longer available to web content — it is only available internally (e.g.
:-moz-system-metric(windows-default-theme) - Archive of obsolete content
the :-moz-system-metric(windows-default-theme) css pseudo-class matches an element if the user is currently using one of the following themes in windows: luna, royale, zune, or aero (i.e., vista basic, vista standard, or aero glass).
... note: since firefox 58, this pseudo-class is no longer available to web content — it is only available internally (e.g.
::-ms-check - Archive of obsolete content
the ::-ms-check css pseudo-element is a microsoft extension that represents checkboxes and radio button groups created by <input type="checkbox"> and <input type="radio">.
... this pseudo-element is supported only in internet explorer and microsoft edge.
::-ms-clear - Archive of obsolete content
the ::-ms-clear css pseudo-element creates a clear button at the edge of an <input type="text"> text control that clears the current value.
... this pseudo-element is non-standard, supported only in internet explorer 10, internet explorer 11, and microsoft edge.
::-ms-reveal - Archive of obsolete content
the ::-ms-reveal css pseudo-element is a microsoft extension that is used to display a password reveal button for use with a password field created by <input type="password">.
... the ::-ms-reveal pseudo-element is specific to internet explorer 10 and later.
::-ms-ticks-after - Archive of obsolete content
the ::-ms-ticks-after css pseudo-element is a microsoft extension that applies one or more styles to the tick marks that appear after the track of a slider control.
... it is possible to use the ::-ms-ticks-after, ::-ms-ticks-before, and ::-ms-track pseudo-elements together.
::-ms-ticks-before - Archive of obsolete content
the ::-ms-ticks-before css pseudo-element is a microsoft extension that applies one or more styles to the tick marks that appear before the track of a slider control.
... it is possible to use the ::-ms-ticks-after, ::-ms-ticks-before, and ::-ms-track pseudo-elements together.
::-ms-track - Archive of obsolete content
the ::-ms-track css pseudo-element is a microsoft extension that represents the track of a slider control.
... it is possible to use the ::-ms-ticks-after, ::-ms-ticks-before, and ::-ms-track pseudo-elements together.
Random Number Generator - MDN Web Docs Glossary: Definitions of Web-related terms
a prng (pseudorandom number generator) is an algorithm that outputs numbers in a complex, seemingly unpredictable pattern.
... learn more general knowledge pseudorandom number generator on wikipedia math.random(), a built-in javascript prng function.
Attribute selectors - Learn web development
next steps now we are done with attribute selectors, you can continue on to the next article and read about pseudo-class and pseudo-element selectors.
... previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
Type, class, and ID selectors - Learn web development
for example, if i wanted to select the first child of any descendant element of <article> , no matter what element it was, and make it bold, i could use the :first-child selector, which we will learn more about in the lesson on pseudo-classes and pseudo-elements, as a descendant selector along with the <article> element selector: article :first-child { } this could be confused however with article:first-child, which will select any <article> element that is the first child of another element.
... previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
The HTML5 input types - Learn web development
note: if the data entered is not an email address, the :invalid pseudo-class will match, and the validitystate.typemismatch property will return true.
... previous overview: forms next in this module your first form how to structure a web form basic native form controls the html5 input types other form controls styling web forms advanced form styling ui pseudo-classes client-side form validation sending form data advanced topics how to build custom form controls sending forms through javascript property compatibility table for form widgets ...
How to build custom form controls - Learn web development
because our control is focusable, we double this custom style with the :focus pseudo-class in order to be sure they will behave the same.
...if the content overflows, we display an ellipsis */ display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow: ellipsis; vertical-align: top; } we don't need an extra element to design the down arrow; instead, we're using the :after pseudo-element.
Graceful asynchronous programming with Promises - Learn web development
with old-style callbacks, a pseudo-code representation of the above functionality might look something like this: choosetoppings(function(toppings) { placeorder(toppings, function(order) { collectorder(order, function(pizza) { eatpizza(pizza); }, failurecallback); }, failurecallback); }, failurecallback); this is messy and hard to read (often referred to as "callback hell"), requires the failurecallback() to be...
...if we represented the above pseudo-code using asynchronous promises instead, we'd end up with something like this: choosetoppings() .then(function(toppings) { return placeorder(toppings); }) .then(function(order) { return collectorder(order); }) .then(function(pizza) { eatpizza(pizza); }) .catch(failurecallback); this is much better — it is easier to see what is going on, we only need a single .catch() block to handle all the errors, it doesn't block the main thread (so we can keep playing video games while we wait for the pizza to be ready to collect), and each operation is guaranteed to wait for p...
Accessibility in React - Learn web development
using pseudocode, our logic should be something like this: if (wasnoteditingbefore && iseditingnow) { focusoneditfield() } if (waseditingbefore && isnoteditingnow) { focusoneditbutton() } the react team had discussed ways to get a component’s previous state, and has provided an example custom hook we can use for the job.
...we want this constant to track the previous value of isediting, so we call useprevious with isediting as an argument: const wasediting = useprevious(isediting); with this constant, we can update our useeffect() hook to implement the pseudocode we discussed before — update it as follows: useeffect(() => { if (!wasediting && isediting) { editfieldref.current.focus(); } if (wasediting && !isediting) { editbuttonref.current.focus(); } }, [wasediting, isediting]); note that the logic of useeffect() now depends on wasediting, so we provide it in the array of dependencies.
Firefox and the "about" protocol
here is a complete list of urls in the about: pseudo protocol: about: page description about:about provides an overview of all about: pages available for your current firefox version about:addons add-ons manager about:buildconfig displays the configuration and platform used to build firefox about:cache displays information about the memory, disk, and appcache about:checkerboard switches to the checkerboarding measurement page, which allows to detect...
... the array maps most of the urls, like config to urls in the chrome: pseudo protocol, such as chrome://global/content/config.xul.
HTTP Cache
nsicacheentry //github.com/realityripple/uxp/blob/master/netwerk/cache2/nsicacheentry.idl obtained asynchronously or pseudo-asynchronously by a call to nsicachestorage.asyncopenuri.
... nsicachestorage.asyncopenuri forwards to cacheentry::asyncopen and triggers the following pseudo-code: cachestorage::asyncopenuri - the api entry point: globally atomic: look a given cacheentry in cachestorageservice hash tables up if not found: create a new one, add it to the proper hash table and set its state to notloaded consumer reference ++ call to cacheentry::asyncopen consumer reference -- cacheentry::asyncopen (entry atomic): the opener is added to fifo, ...
IME handling guide
if we can separate editor contents per paragraph, moving selection between paragraphs generates pseudo focus move, we can reduce this size and runtime cost of contenteventhandler.
... when imestatemanager in parent process is notified of pseudo focus move from or to menubar while a remote process has focus, it notifies the remote process of "menu keyboard listener installed".
Mozilla Web Developer FAQ
externally defined character entities other than the five pre-defined ones (&lt;, &gt;, &amp;, &quot; and &apos;) are only supported if the document references a public identifier for which there is a mapping in mozilla’s pseudo-dtd catalog and the document has not been declared standalone.
... in older versions of mozilla as well as in old mozilla-based products, there is no pseudo-dtd catalog and the use of externally defined character entities (other than the five pre-defined ones) leads to an xml parsing error.
Mozilla Style System
the methods on nsistyleruleprocessor allow the front end to ask the back ends for the style data that applies to a given element or pseudo-element, in the form of style rules.
... computed style (front end) the interface that the front end exposes to the rest of mozilla consists of a single nsstyleset object and many nsstylecontext objects, each of which holds the computed style for an element, pseudo-element, or text node.
Introduction to NSPR
in pseudocode, the sequence looks like this: enter(monitor); ...
...therefore, the pseudocode for the waiting thread might look like this: enter(monitor) while (!expression) wait(condition); ...
nsIDOMWindow
method overview nsidomcssstyledeclaration getcomputedstyle(in nsidomelement elt, [optional] in domstring pseudoelt); nsiselection getselection(); void scrollby(in long xscrolldif, in long yscrolldif); void scrollbylines(in long numlines); void scrollbypages(in long numpages); void scrollto(in long xscroll, in long yscroll); void sizetocontent(); attributes attribute type description applicationcache nsidomofflineresou...
... nsidomcssstyledeclaration getcomputedstyle( in nsidomelement elt, in domstring pseudoelt optional ); parameters elt pseudoelt optional return value getselection() returns the nsiselection object indicating what if any content is currently selected in the window.
nsITreeBoxObject
childelt the pseudoelement hit: this can have values of "cell", "twisty", "image", and "text".
... void getcoordsforcellitem(in long row, in nsitreecolumn col, in acstring element, out long x, out long y, out long width, out long height); parameters row the index of the row col the nsitreecolumn element the pseudoelement.
Paint Flashing Tool - Firefox Developer Tools
for example, a repaint will be needed if the user scrolls the page or moves the mouse pointer over an element with a :hover pseudo-class that changes the element's style.
...after moving the mouse around and scrolling a bit, the above page looks like this: in this example, there are two main sources of repaints: moving the mouse over links makes the browser repaint them, because they have a style applied using the :hover pseudo-class scrolling makes the browser repaint the new part of the page coming into view at the bottom of the screen, and also the scrollbar at the top-right to deactivate paint flashing, click the "highlight painted area" icon in the toolbox again.
AnimationEvent - Web APIs
animationevent.pseudoelement read only is a domstring, starting with '::', containing the name of the pseudo-element the animation runs on.
... if the animation doesn't run on a pseudo-element but on the element, an empty string: ''.
Background Tasks API - Web APIs
this element is a pseudo-dom into which we can insert elements without immediately changing the main dom itself.
...then we append the new element to the end of the pseudo-dom in logfragment.
Document.querySelectorAll() - Web APIs
note: if the specified selectors include a css pseudo-element, the returned list is always empty.
... the :scope pseudo-class restores the expected behavior, only matching selectors on descendants of the base element: var select = document.queryselector('.select'); var inner = select.queryselectorall(':scope .outer .inner'); inner.length; // 0 specifications specification status comment domthe definition of 'parentnode.queryselectorall()' in that specification.
Element.querySelectorAll() - Web APIs
note: if the specified selectors include a css pseudo-element, the returned list is always empty.
... the :scope pseudo-class restores the expected behavior, only matching selectors on descendants of the base element: var select = document.queryselector('.select'); var inner = select.queryselectorall(':scope .outer .inner'); inner.length; // 0 specifications specification status comment domthe definition of 'parentnode.queryselectorall()' in that specification.
KeyframeEffect.target - Web APIs
the target property of a keyframeeffect interface represents the element or pseudo-element being animated.
... syntax var targetelement = document.getelementbyid("elementtoanimate"); var keyframes = new keyframeeffect( targetelement, keyframeblock, timingoptions ); // returns #elementtoanimate keyframes.target; // assigns keyframes a new target keyframes.target = newtargetelement; value an element, csspseudoelement, or null.
ParentNode.querySelectorAll() - Web APIs
note: if the specified selectors include a css pseudo-element, the returned list is always empty.
... the :scope pseudo-class restores the expected behavior, only matching selectors on descendants of the base element: var select = document.queryselector('.select'); var inner = select.queryselectorall(':scope .outer .inner'); inner.length; // 0 specifications specification status comment domthe definition of 'parentnode.queryselectorall()' in that specification.
TransitionEvent - Web APIs
transitionevent.pseudoelement read only is a domstring, starting with ::, containing the name of the pseudo-element the animation runs on.
... if the transition doesn't run on a pseudo-element but on the element, an empty string: ''.
Rendering and the WebXR frame animation callback - Web APIs
this pseudocode outlines that process: for each view in the pose's views list: get the webxr gl layer's viewport set the webgl viewport to match for each object in the scene bindprogram() bindvertices() bindmatrices() binduniforms() bindbuffers() bindtextures() drawmyobject() put simply, this form of renderer is using view-first order.
... the resulting pseudocode looks like this: for each object in the scene bindprogram() binduniforms() bindbuffers() bindtextures() for each view in the pose's views list get the xrwebgllayer's viewport set the webgl viewport to match bindvertices() bindmatrices() drawmyobject() by changing things up in this way, we only bind programs, uniforms, buffers, textures, and potentially other t...
Window.open() - Web APIs
WebAPIWindowopen
"javascript:" pseudo-links become dysfunctional when javascript support is disabled or inexistent.
...javascript in links, jakob nielsen, december 2002 links & javascript living together in harmony, jeff howden, february 2002 comp.lang.javascript newsgroup discussion faq on "javascript:" links never use <a href="#" onclick="window.open(...);"> such pseudo-link also breaks accessibility of links.
-moz-image-region - CSS: Cascading Style Sheets
for certain xul elements and pseudo-elements that use an image from the list-style-image property, this property specifies a region of the image that is used in place of the whole image.
... formal definition initial valueautoapplies toxul <image> elements and :-moz-tree-image, :-moz-tree-twisty, and :-moz-tree-checkbox pseudo-elements.
:-moz-focusring - CSS: Cascading Style Sheets
the :-moz-focusring css pseudo-class is a mozilla extension that is similar to the :focus pseudo-class, but it only matches an element if it's currently focused and a focus ring or other indicator should be drawn around it.
...whether the user agent has focus ring drawing enabled can depend on operating system settings and other factors, so the precise behavior of this pseudo-class will vary from platform to platform.
:-moz-loading - CSS: Cascading Style Sheets
the :-moz-loading css pseudo-class is a mozilla extension that matches elements that can't be displayed because they have not started loading, such as images that haven't started to arrive yet.
... note that images that are in the process of loading are not matched by this pseudo-class.
:-moz-submit-invalid - CSS: Cascading Style Sheets
the :-moz-submit-invalid css pseudo-class is a mozilla extension that represents any submit <button> on forms whose contents aren't valid based on their validation constraints.
...you can use this pseudo-class to customize the appearance of the submit button when there are invalid form fields.
:-moz-window-inactive - CSS: Cascading Style Sheets
the :-moz-window-inactive css pseudo-class is a mozilla extension that matches any element while it's in an inactive window.
... note: prior to the addition of this pseudo-class, giving different styles to background windows was achieved by setting an attribute (active="true") on the top-level xul chrome window.
::-webkit-file-upload-button - CSS: Cascading Style Sheets
the ::-webkit-file-upload-button css pseudo-element represents the button of an <input> of type="file".
... this pseudo-element is non-standard and only supported in webkit/blink compatible browsers like chrome, opera and safari (indicated by the -webkit prefix).
::-webkit-progress-inner-element - CSS: Cascading Style Sheets
the ::-webkit-progress-inner-element css pseudo-element represents the outermost container of the <progress> element.
... it is the parent of the ::-webkit-progress-bar pseudo-element.
::-webkit-progress-value - CSS: Cascading Style Sheets
the ::-webkit-progress-value css pseudo-element represents the filled-in portion of the bar of a <progress> element.
... it is a child of the ::-webkit-progress-bar pseudo-element.
::-webkit-scrollbar - CSS: Cascading Style Sheets
the ::-webkit-scrollbar css pseudo-element affects the style of the scrollbar of an element.
... css scrollbar selectors you can use the following pseudo elements to customize various parts of the scrollbar for webkit browsers: ::-webkit-scrollbar — the entire scrollbar.
::-webkit-search-cancel-button - CSS: Cascading Style Sheets
the ::-webkit-search-cancel-button css pseudo-element represents a button (the "cancel button") at the edge of an <input> of type="search" which clears away the current value of the <input> element.
... this button and pseudo-element are non-standard, supported only in webkit and blink, hence the vendor prefix.
::-webkit-search-results-button - CSS: Cascading Style Sheets
the ::-webkit-search-results-button css pseudo-element represents a button (the "search results button") at the left edge of an <input> of type="search" which when clicked displays a menu which allows the user to choose from previous recent search queries.
... this button and pseudo-element are non-standard, supported only in webkit and blink, hence the vendor prefix.
::cue-region - CSS: Cascading Style Sheets
the ::cue-region css pseudo-element matches webvtt cues within a selected element.
...t opacity outline outline-color outline-style outline-width ruby-position text-combine-upright text-decoration text-decoration-color text-decoration-line text-decoration-style text-decoration-thickness text-shadow visibility white-space specifications specification status comment webvtt: the web video text tracks formatthe definition of 'the ::cue-region pseudo-element' in that specification.
::grammar-error - CSS: Cascading Style Sheets
the ::grammar-error css pseudo-element represents a text segment which the user agent has flagged as grammatically incorrect.
... html <p>my friends is coming to the party tonight.</p> css ::grammar-error { text-decoration: underline red; color: red; } result specifications specification status comment css pseudo-elements level 4the definition of '::grammar-error' in that specification.
::spelling-error - CSS: Cascading Style Sheets
the ::spelling-error css pseudo-element represents a text segment which the user agent has flagged as incorrectly spelled.
... html <p contenteditable spellcheck="true">my friends are coegdfgfddffbgning to the party tonight.</p> css ::spelling-error { text-decoration: wavy red; } result specifications specification status comment css pseudo-elements level 4the definition of '::spelling-error' in that specification.
:blank - CSS: Cascading Style Sheets
WebCSS:blank
the :blank css pseudo-class selects empty user input elements (eg.
... syntax :blank examples simple :blank example in eventual supporting browsers, the :blank pseudo-class will enable developers to highlight in some way input controls that are not required, but still have no content filled in, perhaps as a reminder to users.
:default - CSS: Cascading Style Sheets
WebCSS:default
the :default css pseudo-class selects form elements that are the default in a group of related elements.
... what this selector matches is defined in html standard §4.16.3 pseudo-classes — it may match the <button>, <input type="checkbox">, <input type="radio">, and <option> elements: a default option element is the first one with the selected attribute, or the first enabled option in dom order.
:defined - CSS: Cascading Style Sheets
WebCSS:defined
the :defined css pseudo-class represents any element that has been defined.
... /* selects any defined element */ :defined { font-style: italic; } /* selects any instance of a specific custom element */ simple-custom:defined { display: block; } syntax :defined examples hiding elements until they are defined the following snippets are taken from our defined-pseudo-class demo (see it live also).
:disabled - CSS: Cascading Style Sheets
WebCSS:disabled
the :disabled css pseudo-class represents any disabled element.
... recommendation defines the pseudo-class, but not the associated semantics.
:enabled - CSS: Cascading Style Sheets
WebCSS:enabled
the :enabled css pseudo-class represents any enabled element.
... recommendation defines the pseudo-class, but not the associated semantics.
:first - CSS: Cascading Style Sheets
WebCSS:first
the :first css pseudo-class, used with the @page at-rule, represents the first page of a printed document.
... (see :first-child for general first element of a node.) /* selects the first page when printing */ @page :first { margin-left: 50%; margin-top: 50%; } note: you can't change all css properties with this pseudo-class.
:focus-visible - CSS: Cascading Style Sheets
the :focus-visible pseudo-class applies while an element matches the :focus pseudo-class and the ua (user agent) determines via heuristics that the focus should be made evident on the element.
... note that firefox supports similar functionality through an older, prefixed pseudo-class — :-moz-focusring.
:focus-within - CSS: Cascading Style Sheets
the :focus-within css pseudo-class represents an element that has received focus or contains an element that has received focus.
... in other words, it represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus.
:focus - CSS: Cascading Style Sheets
WebCSS:focus
the :focus css pseudo-class represents an element (such as a form input) that has received focus.
... /* selects any <input> when focused */ input:focus { color: red; } note: this pseudo-class applies only to the focused element itself.
:lang() - CSS: Cascading Style Sheets
WebCSS:lang
the :lang() css pseudo-class matches elements based on the language they are determined to be in.
... examples in this example, the :lang() pseudo-class is used to match the parents of quote elements (<q>) using child combinators.
:left - CSS: Cascading Style Sheets
WebCSS:left
the :left css pseudo-class, used with the @page at-rule, represents all left-hand pages of a printed document.
... note: this pseudo-class can be used to change only the margin, padding, border, and background properties of the page box.
:link - CSS: Cascading Style Sheets
WebCSS:link
the :link css pseudo-class represents an element that has not yet been visited.
... /* selects any <a> that has not been visited yet */ a:link { color: red; } styles defined by the :link pseudo-class will be overridden by any subsequent link-related pseudo-class (:active, :hover, or :visited) that has at least equal specificity.
:nth-of-type() - CSS: Cascading Style Sheets
the :nth-of-type() css pseudo-class matches elements of a given type (tag name), based on their position among a group of siblings.
... /* selects every fourth <p> element among any group of siblings */ p:nth-of-type(4n) { color: lime; } syntax the nth-of-type pseudo-class is specified with a single argument, which represents the pattern for matching elements.
:right - CSS: Cascading Style Sheets
WebCSS:right
the :right css pseudo-class, used with the @page at-rule, represents all right-hand pages of a printed document.
... note: this pseudo-class can be used to change only the margin, padding, border, and background properties of the page box.
:valid - CSS: Cascading Style Sheets
WebCSS:valid
the :valid css pseudo-class represents any <input> or other <form> element whose contents validate successfully.
... /* selects any valid <input> */ input:valid { background-color: powderblue; } this pseudo-class is useful for highlighting correct fields for the user.
@page - CSS: Cascading Style Sheets
WebCSS@page
| <page-margin-box> <page-body>where <page-selector> = <pseudo-page>+ | <ident> <pseudo-page>*<page-margin-box> = <page-margin-box-type> '{' <declaration-list> '}'where <pseudo-page> = : [ left | right | first | blank ]<page-margin-box-type> = @top-left-corner | @top-left | @top-center | @top-right | @top-right-corner | @bottom-left-corner | @bottom-left | @bottom-center | @bottom-right | @bottom-right-corner | @left-top | @left-middle | @left-bottom | @righ...
...t-top | @right-middle | @right-bottom examples @page pseudo-class examples please refer to the various pseudo-classes of @page for examples.
@supports - CSS: Cascading Style Sheets
WebCSS@supports
<subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!<combinator> = '>' | '+' | '~' | [ '|' ]where <type-selector> = <wq-name> | <ns-prefix>?
... '*'<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector><pseudo-element-selector> = ':' <pseudo-class-selector><pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'where <wq-name> = <ns-prefix>?
Relationship of flexbox to other layout methods - CSS: Cascading Style Sheets
flexbox and display: contents the contents value of the display property is a new value that is described in the spec as follows: “the element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal.
... for the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree.” this value of display controls box generation, and whether the element should generate a box that we can style and see on the page, or whether instead the box it would normally create should be removed and the child elements essentially moved up to participate in whatever layout method the parent would have been part of.
Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
the contents value of the display property is a new value that is described in the display specification as follows: “the element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal.
... for the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree.” if you set an item to display: contents the box it would normally create disappears, and the boxes of the child elements appear as if they have risen up a level.
Using CSS counters - CSS: Cascading Style Sheets
the generated text is the value of the innermost counter of the given name in scope at the given pseudo-element.the counter is rendered in the specified style (decimal by default).
...the generated text is the value of all counters with the given name in scope at the given pseudo-element, from outermost to innermost, separated by the specified string.
Using CSS custom properties (variables) - CSS: Cascading Style Sheets
a common best practice is to define custom properties on the :root pseudo-class, so that it can be applied globally across your html document: :root { --main-bg-color: brown; } however, this doesn't always have to be the case: you maybe have a good reason for limiting the scope of your custom properties.
...by declaring a custom property on the :root pseudo-class and using it where needed throughout the document, a css author can reduce the need for repetition: :root { --main-bg-color: brown; } .one { color: white; background-color: var(--main-bg-color); margin: 10px; width: 50px; height: 50px; display: inline-block; } .two { color: white; background-color: black; margin: 10px; width: 150px; height: 70px; display: inli...
transition - CSS: Cascading Style Sheets
different states may be defined using pseudo-classes like :hover or :active or dynamically set using javascript.
... formal definition initial valueas each of the properties of the shorthand:transition-delay: 0stransition-duration: 0stransition-property: alltransition-timing-function: easeapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas each of the properties of the shorthand:transition-delay: as specifiedtransition-duration: as specifiedtransition-property: as specifiedtransition-timing-function: as specifiedanimation typediscrete formal syntax <single-transition>#where <single-transition> = [ none | <single-transition-property> ] | <time> | <timing-function> | <time>where <single-transitio...
HTML attribute: max - HTML: Hypertext Markup Language
WebHTMLAttributesmax
if the value exceeds the max value allowed, the validitystate.rangeoverflow will be true, and the the control will be matched by the :out-of-range and :invalid pseudo-classes.
...put type="datetime-local" min="2019-12-25t23:59"> number <number> <input type="number" min="0" step="5" max="100"> range <number> <input type="range" min="60" step="5" max="100"> note: when the data entered by the user doesn't adhere to the maximum value set, the value is considered invalid in contraint validation and will match the :invalid and :out-of-range pseudoclasses see client-side validation and rangeoverflow for more information.
Via - HTTP
WebHTTPHeadersVia
header type general header forbidden header name yes syntax via: [ <protocol-name> "/" ] <protocol-version> <host> [ ":" <port> ] or via: [ <protocol-name> "/" ] <protocol-version> <pseudonym> directives <protocol-name> optional.
... <pseudonym> name/alias of an internal proxy.
getter - JavaScript
it is not possible to simultaneously have a getter bound to a property and have that property actually hold a value, although it is possible to use a getter and a setter in conjunction to create a type of pseudo-property.
... examples defining a getter on new objects in object initializers this will create a pseudo-property latest for object obj, which will return the last array item in log.
setter - JavaScript
setters are most often used in conjunction with getters to create a type of pseudo-property.
... ( { set x(v) { }, set x(v) { } } and { x: ..., set x(v) { } } are forbidden ) examples defining a setter on new objects in object initializers the following example define a pseudo-property current of object language.
Math.random() - JavaScript
the math.random() function returns a floating-point, pseudo-random number in the range 0 to less than 1 (inclusive of 0, but not 1) with approximately uniform distribution over that range — which you can then scale to your desired range.
... syntax math.random() return value a floating-point, pseudo-random number between 0 (inclusive) and 1 (exclusive).
Math.random() - JavaScript
the math.random() function returns a floating-point, pseudo-random number in the range 0 to less than 1 (inclusive of 0, but not 1) with approximately uniform distribution over that range — which you can then scale to your desired range.
... syntax math.random() return value a floating-point, pseudo-random number between 0 (inclusive) and 1 (exclusive).
new.target - JavaScript
the new.target pseudo-property lets you detect whether a function or constructor was called using the new operator.
... the new.target pseudo-property is available in all functions.
<mpadded> - MathML
pseudo-units it is possible to use the keywords "depth", "height", and "width" as a pseudo-unit for the attributes depth, height, lspace, voffset, and width.
... prior to gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4) the mathml2 pseudo-unit lspace was allowed, which is no longer present in the mathml3 recommendation and has been removed now.
SVG 1.1 Support in Firefox - SVG: Scalable Vector Graphics
of the pseudo-inputs, sourcegraphic, sourcealpha, fillpaint and strokepaint are implemented.
... use of an unimplemented pseudo-input or filter element will cause the filter to be ignored and the referring graphic to be drawn without any filter.
Understanding WebAssembly text format - WebAssembly
all code in a webassembly module is grouped into functions, which have the following pseudo-code structure: ( func <signature> <locals> <body> ) the signature declares what the function takes (parameters) and returns (return values).
...the pseudo code would look something like tbl[i]().
chrome - Archive of obsolete content
chrome is a built-in pseudo module of the toolkit loader.
event/target - Archive of obsolete content
adding listeners eventtarget interface defines on method, that can be used to register event listeners on them for the given event type: target.on('message', function onmessage(message) { // note: `this` pseudo variable is an event `target` unless // intentionally overridden via `.bind()`.
Chrome Authority - Archive of obsolete content
to obtain these privileges, the module must declare its intent with a statement like the following: var {cc, ci} = require("chrome"); the "chrome" built-in pseudo module is provided by the "toolkit/loader" module.
LookupPrefix - Archive of obsolete content
= document.contenttype; // mozilla only // depends on private function _lookupnamespaceprefix() below and on https://developer.mozilla.org/en/code_snippets/lookupnamespaceuri // http://www.w3.org/tr/dom-level-3-core/core.html#node3-lookupnamespaceprefix // http://www.w3.org/tr/dom-level-3-core/namespaces-algorithms.html#lookupnamespaceprefixalgo // (the above had a few apparent 'bugs' in the pseudo-code which were corrected here) if (node.lookupprefix && htmlmode !== 'text/html') { // shouldn't use this in text/html for mozilla as will return null return node.lookupprefix(namespaceuri); } if (namespaceuri === null || namespaceuri === '') { return null; } switch (node.nodetype) { case 1: // node.element_node return _lookupnamespaceprefix(namespaceuri, node); case 9: // node...
Appendix F: Monitoring DOM changes - Archive of obsolete content
in particular, the ::before and ::after pseudo-elements, and pseudo-classes like :hover and :active can be used to achieve extremely complex dynamic behavior.
Creating a Help Content Pack - Archive of obsolete content
nc:emptysearchlink specifies what uri should be shown when the pseudo-result "no results found" is accessed.
Menu - Archive of obsolete content
ArchiveMozillaJetpackUIMenu
the selector must be a true css selector, not a jquery or other type of pseudo-selector.
New Skin Notes - Archive of obsolete content
--dria the buttons in the upper-right of the horizontal nav-bar don't really feel like buttons; maybe add a pseudo-class for onhover that gives them an underline?
Using Breakpoints in Venkman - Archive of obsolete content
a hard breakpoint represents an actual trap instruction included in the pseudocode of a compiled function.
Anonymous Content - Archive of obsolete content
because content in multiple scopes can be focused, the css :focus pseudo-element is hierarchical.
Binding Attachment and Detachment - Archive of obsolete content
-moz-binding value: none | [,]* <uri> | inherit initial value: none applies to: all elements (not generated content or pseudo-elements) inherited: no percentages: n/a the value of the -moz-binding property is a set of urls that identify specific bindings.
Learn XPI Installer Scripting by Example - Archive of obsolete content
most installation scripts, including the one discussed here, take the following basic form (in pseudo-code and with links to the sections in which these installation steps are documented): initinstall(); if (verify_space()) { err = add_dirs_and_files; register_files; if (err==success) { performinstall() }; else { cancelinstall() }; } as you can see in the code listing, the verification process at the top is on lines 1 to 18; the file addition process, here part of the main install...
Tree Widget Changes - Archive of obsolete content
the :-moz-tree-separator pseudo has been improved to make it a proper box type and now has additional styling capabilities.
MacFAQ - Archive of obsolete content
this is implemented in a pseudo "hidden window" technique and parsing the window arguments instead of command-line handlers and some of the toolkit singleton window code.
reftest opportunities files - Archive of obsolete content
est/exunit http://dbaron.org/css/test/emunit http://dbaron.org/css/test/sec040310 http://dbaron.org/css/test/parsing3 http://dbaron.org/css/test/selector_confusion http://dbaron.org/css/test/univsel http://dbaron.org/css/test/childsel http://dbaron.org/css/test/sibsel http://dbaron.org/css/test/attrsel http://dbaron.org/css/test/twoclass http://dbaron.org/css/test/xmlid http://dbaron.org/css/test/pseudos http://dbaron.org/css/test/pseudos2 http://dbaron.org/css/test/pseudos3 http://dbaron.org/css/test/firstchild http://dbaron.org/css/test/sec051103 http://dbaron.org/css/test/sec051103b http://dbaron.org/css/test/order http://dbaron.org/css/test/inherit http://dbaron.org/css/test/sec060402 http://dbaron.org/css/test/sec060403b http://dbaron.org/css/test/specific http://dbaron.org/css/test/noncss1...
Making sure your theme works with RTL locales - Archive of obsolete content
gecko 1.9.2 and later gecko 1.9.2 introduced the :-moz-locale-dir css pseudoclass, which matches based on whether the user interface is being rendered left-to-right or right-to-left: :-moz-locale-dir(ltr) matches if the user interface is being rendered left to right.
-moz-binding - Archive of obsolete content
formal definition initial valuenoneapplies toall elements except generated content or pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <url> | none examples .exampleone { -moz-binding: url(http://www.example.org/xbl/htmlbindings.xml#radiobutton); } specifications not part of any standard.
:-moz-system-metric(mac-graphite-theme) - Archive of obsolete content
note: since firefox 58, this pseudo-class is no longer available to web content — it is only available internally (e.g.
::-ms-browse - Archive of obsolete content
the ::-ms-browse css pseudo-element is a microsoft extension that represents the button that opens the file picker of <input type="file">.
::-ms-expand - Archive of obsolete content
the ::-ms-expand css pseudo-element is a microsoft extension that represents the button of a <select> menu control that opens or closes the drop-down menu.
::-ms-fill-lower - Archive of obsolete content
the ::-ms-fill-lower css pseudo-element represents the lower portion of the track of a slider control; that is, the portion corresponding to values less than the value currently selected by the thumb.
::-ms-fill-upper - Archive of obsolete content
the ::-ms-fill-upper css pseudo-element is a microsoft extension that represents the upper portion of the track of a slider control; that is, the portion corresponding to values greater than the value currently selected by the thumb.
::-ms-thumb - Archive of obsolete content
the ::-ms-thumb css pseudo-element is a microsoft extension that represents the thumb that the user moves within the track of a slider control to alter its numerical value.
::-ms-tooltip - Archive of obsolete content
the ::-ms-tooltip css pseudo-element is a microsoft extension that represents the tooltip of a slider control.
::-ms-value - Archive of obsolete content
the ::-ms-value css pseudo-element is a microsoft extension that applies rules to the value of a text or password <input> control or the content of a <select> control.
LiveConnect Overview - Archive of obsolete content
java arrays are converted to a javascript pseudo-array object; this object behaves just like a javascript array object: you can access it with the syntax arrayname[index] (where index is an integer), and determine its length with arrayname.length.
Implementation Status - Archive of obsolete content
xforms and styling section title status notes bugs g.1 pseudo-classes partial :read-only and :read-write are suported using :-moz-read-only and :-moz-read-write 313111; g.2 pseudo-elements unsupported we support ::value, ::repeat-index, and ::repeat-item through the attributes xf-value, xf-repeat-index, and xf-repeat-item.
Mozilla's DOCTYPE sniffing - Archive of obsolete content
an xml declaration (pseudo-pi) without a doctype (in other words, ignore the xml declaration and use the doctype).
Gecko FAQ - Gecko Redirect 1
various metadata attributes: cite, datetime, lang, hreflang bidirectional text layout, which is only used in hebrew and arabic (ibm has begun work to add bidi support in a future release) style sheets css 1 - full support, except for: the application of styles to html column elements the ability to turn off author styles the names of certain mozilla extension pseudo-classes lack the moz- prefix css 2 - partial support is expected and has already been built into gecko, including support for css2 positioning, but no commitment has been made to achieve a specific level of support dom level 0 level 1 core: full support making entityreferences available through dom1; per a provision of the dom1 spec for xml implementations, en...
Boolean - MDN Web Docs Glossary: Definitions of Web-related terms
below is some javascript pseudocode (it's not truly executable code) demonstrating this concept.
Digest - MDN Web Docs Glossary: Definitions of Web-related terms
be used to perform several tasks: in non-cryptographic applications (e.g., the index of hash tables, or a fingerprint used to detect duplicate data or to uniquely identify files) verify message integrity (a tampered message will have a different hash) store passwords so that they can't be retrieved, but can still be checked (to do this securely, you also need to salt the password.) generate pseudo-random numbers generate keys it is critical to choose the proper hash function for your use case to avoid collisions and predictability.
MDN Web Docs Glossary: Definitions of Web-related terms
prefetch preflight request prerender presto primitive privileged privileged code progressive enhancement progressive web apps promise property property (css) property (javascript) protocol prototype prototype-based programming proxy server pseudo-class pseudo-element pseudocode public-key cryptography python q quality values quaternion quic r rail random number generator raster image rdf real user monitoring (rum) recursion reference reflow regular expression ...
HTML: A good basis for accessibility - Learn web development
onclick events anchor tags are often abused with the onclick event to create pseudo-buttons by setting href to "#" or "javascript:void(0)" to prevent the page from refreshing.
HTML: A good basis for accessibility - Learn web development
onclick events anchor tags are often abused with the onclick event to create pseudo-buttons by setting href to "#" or "javascript:void(0)" to prevent the page from refreshing.
Backgrounds and borders - Learn web development
previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
Debugging CSS - Learn web development
previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
Handling different text directions - Learn web development
previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
Images, media, and form elements - Learn web development
previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
Organizing your CSS - Learn web development
previous overview: building blocks in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
Overflowing content - Learn web development
previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
Combinators - Learn web development
previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
Sizing items in CSS - Learn web development
previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
Styling tables - Learn web development
previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
The box model - Learn web development
previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
CSS values and units - Learn web development
previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
CSS building blocks - Learn web development
the sub-articles are as follows: type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model everything in css has a box around it, and understanding these boxes is key to being able to create layouts with css, or to align items with other items.
Practical positioning examples - Learn web development
setting the checked state there is one final bit of css to add — put the following at the bottom of your css: input[type=checkbox]:checked + aside { right: 0px; } the selector is pretty complex here — we are selecting the <aside> element adjacent to the <input> element, but only when it is checked (note the use of the :checked pseudo-class to achieve this).
Use CSS to solve common problems - Learn web development
LearnCSSHowto
common use cases basics how to apply css to the dom how to use whitespace in css how to write comments in css how to select elements via element name, class or id how to select elements via attribute name and content how to use pseudo-classes how to use pseudo-elements how to apply multiple selectors to the same rule how to specify colors in css how to debug css in the browser css and text how to style text how to customize a list of elements how to style links how to add shadows to text boxes and layouts how to size css boxes how to control overflowing content how to control the part of a css box that the background is drawn under how do i define inline, block, and inl...
Fundamental text and font styling - Learn web development
you can't select and style subsections of text unless you wrap them in an appropriate element (such as a <span> or <strong>), or use a text-specific pseudo-element like ::first-letter (selects the first letter of an element's text), ::first-line (selects the first line of an element's text), or ::selection (selects the text currently highlighted by the cursor.) fonts let's move straight on to look at properties for styling fonts.
Styling text - Learn web development
styling links when styling links, it is important to understand how to make use of pseudo-classes to style link states effectively, and how to style links for use in common varied interface features such as navigation menus and tabs.
How to structure a web form - Learn web development
see also a list apart: sensible forms: a form usability checklist previous overview: forms next in this module your first form how to structure a web form basic native form controls the html5 input types other form controls styling web forms advanced form styling ui pseudo-classes client-side form validation sending form data advanced topics how to build custom form controls sending forms through javascript property compatibility table for form widgets ...
Other form controls - Learn web development
previous overview: forms next in this module your first form how to structure a web form basic native form controls the html5 input types other form controls styling web forms advanced form styling ui pseudo-classes client-side form validation sending form data advanced topics how to build custom form controls sending forms through javascript property compatibility table for form widgets ...
Your first form - Learn web development
overview: forms next in this module your first form how to structure a web form basic native form controls the html5 input types other form controls styling web forms advanced form styling ui pseudo-classes client-side form validation sending form data advanced topics how to build custom form controls sending forms through javascript property compatibility table for form widgets ...
Web forms — Working with user data - Learn web development
ui pseudo-classes an introduction to the ui pseudo-classes enabling html form controls to be targeted based on their current state.
CSS basics - Learn web development
img[src] selects <img src="myimage.png"> but not <img> pseudo-class selector the specified element(s), but only when in the specified state.
Adding vector graphics to the Web - Learn web development
(external stylesheets invoked from the svg file take no effect.) you cannot restyle the image with css pseudoclasses (like :focus).
Introducing asynchronous JavaScript - Learn web development
that means that the following (pseudocode) wouldn't work: let response = fetch('myimage.png'); let blob = response.blob(); // display your image blob in the ui somehow that's because you don't know how long the image will take to download, so when you come to run the second line it will throw an error (possibly intermittently, possibly every time) because the response is not yet available.
Looping code - Learn web development
in pseudocode, this would look something like the following: loop(food = 0; foodneeded = 10) { if (food >= foodneeded) { exit loop; // we have enough food; let's go home } else { food += 2; // spend an hour collecting 2 more food // loop will then run again } } so the amount of food needed is set at 10, and the amount the farmer currently has is set at 0.
Introduction to client-side frameworks - Learn web development
each new pseudo-webpage is usually called a view, and by default, no routing is done.
Handling common accessibility problems - Learn web development
another tip — as shown in our example, you can control how your focusable elements look when focused, using the :focus pseudo-class.
Handling common HTML and CSS problems - Learn web development
however, another issue that appears in versions of ie older than 9 is that none of the newer selectors (mainly pseudo-classes and pseudo-elements like :nth-of-type, :not, ::selection, etc.) work.
The Firefox codebase: CSS Guidelines
the rtl-aware equivalents of border-{top/bottom}-{left/right}-radius are border-{start/end}-{start/end}-radius when there is no special rtl-aware property available, use the pseudo :-moz-locale-dir(ltr|rtl) (for xul files) or :dir(ltr|rtl) (for html files).
Experimental features in Firefox
nightly 75 no developer edition 75 no beta 75 no release 75 no preference name layout.css.conic-gradient.enabled and gfx.webrender.all pseudo-class: :focus-visible allows focus styles to be applied to elements like buttons and form controls, only when they are focused using the keyboard (e.g.
:-moz-lwtheme-brighttext
the :-moz-lwtheme-brighttext pseudo-class matches in chrome documents when :-moz-lwtheme is true and a lightweight theme with a bright text color is selected.
:-moz-lwtheme-darktext
the :-moz-lwtheme-darktext pseudo-class matches in chrome documents when :-moz-lwtheme is true and a lightweight theme with a dark text color is selected.
:-moz-lwtheme
the :-moz-lwtheme pseudo-class matches in chrome documents when the root element's lightweightthemes attribute is true and a theme is selected.
::-moz-tree-cell-text(hover)
the :-moz-tree-cell-text(hover) css pseudo-class will match an element if the mouse cursor is presently hovering over text in a tree cell.
::-moz-tree-row(hover)
the ::-moz-tree-row(hover) css pseudo-class will match an element if the mouse cursor is presently hovering over a tree row.
::-moz-tree-row
the ::-moz-tree-row css pseudo-element is used to select rows and apply styles to tree rows.
XPCOMUtils.jsm
pseudocode this section provides some pseudocode that demonstrates how to put together a javascript class based on the steps listed above.
L10n Checks
you pass both paths to the files, e.g.: check-l10n-completeness -i file en-us.dtd my.dtd the output the output of l10n checks shows the missing and obsolete strings in a pseudo-diff format.
Fonts for Mozilla 2.0's MathML engine
if necessary, you might want to modify the font-family on the <math> elements and, for gecko, the on ::-moz-math-stretchy pseudo element too.
Profiling with the Firefox Profiler
label stack the label stack (formerly called "pseudo stack") uses function entry/exit tags added by hand to important points in the code base.
Anonymous Shared Memory
the pseudo-code below shows the use of a file-mapped shared memory by a parent and child processes.
PR_Wait
in pseudo-code, the sequence is as follows: pr_entermonitor(&ml); while (!expression) wait; ...
JSS Provider Notes
securerandom supported algorithms notes pkcs11prng this invokes the nss internal pseudorandom number generator.
Mozilla-JSS JCA Provider notes
securerandom supported algorithms notes pkcs11prng this invokes the nss internal pseudorandom number generator.
NSS 3.12.6 release notes
these options can also be set with the following ssl options: ssloptions.enablerenegotiation ssloptions.requiresafenegotiation new pseudo cipher suite value: tls_empty_renegotiation_info_scsv (cannot be negotiated) tls server name indication for servers tls server name indication (sni) for servers is almost fully implemented in nss 3.12.6.
NSS 3.22 release notes
pseudorandom functions based on hashes other than sha-1 are now supported with pbkdf (bug 554827).
nss tech note7
answer: the version without the initial 00 says : "ps is a string of strong pseudo-random octets [random] [...] long enough that the value of the quantity being crypted is one octet shorter than the rsa modulus" the version with the initial 00 instead says to pad to the same length as the rsa modulus.
Overview of NSS
fips 186-2 pseudorandom number generator.
Python binding for NSS
rewrite setup_certs.py, it was written like an expect script reacting to prompts read from a pseudo terminal but it was fragile and would hang on some systems.
NSS environment variables
3.12.3 nsrandfile string (file name) uses this file to seed the pseudo random number generator.
NSS reference
random number generation this api consists of the two routines used for pseudorandom number generation -- pk11_generaterandomonslot and pk11_generaterandom -- and the two routines used for seeding pseudorandom number generation -- pk11_seedrandom and pk11_randomupdate.
Index
in pseudocode: 250 js_encodecharacters jsapi reference, obsolete, spidermonkey js_encodecharacters copies the characters of a jschar array into a char array, converting the 16-bit values to 8-bit values.
JS_DumpNamedRoots
in pseudocode: /* pseudocode explanation of what js_dumpnamedroots does */ void js_dumpnamedroots(jsruntime *rt, dumpfn dump, void *data) { for each (root in rt->namedroots) dump(root.name, root.address, data); } callback syntax dump is a pointer to a function provided by the application.
compare-locales
options to get a brief list of available options, use the --help flag: $ compare-locales --help the output the output of compare-locales shows the missing and obsolete strings in a pseudo-diff format.
nsIMsgDatabase
bhdr ahdr, in boolean aadd); boolean hdrisincache(in string asearchfolderuri, in nsimsgdbhdr ahdr); attributes attribute type description dbfolderinfo nsidbfolderinfo readonly: firstnew nsmsgkey readonly: msgretentionsettings nsimsgretentionsettings msgdownloadsettings nsimsgdownloadsettings lowwaterarticlenum nsmsgkey readonly: highwaterarticlenum nsmsgkey readonly: nextpseudomsgkey nsmsgkey for undo-redo of move pop->imap.
nsIScriptError
a pseudo-flag for the default, error case.
Using COM from js-ctypes
$ cl ole32.lib test.c c code with pseudo struct needs pseudo struct description here.
Standard OS Libraries
to call objective-c based api from ctypes, use the following functions in libobjc.dylib: objc_getclass to get class sel_registername to register selector name objc_msgsend and some variants to send message to class and instance objective-c code can be translated into c code by the following rule: // objective-c code nsevent loc = [nsevent mouselocation]; // pseudo c code nsevent loc = (nspoint)objc_msgsend(objc_getclass("nsevent"), sel_registername("mouselocation")); example: [nsevent mouselocation] components.utils.import("resource://gre/modules/ctypes.jsm"); let objc = ctypes.open(ctypes.libraryname("objc")); let id = ctypes.structtype("objc_object").ptr; let sel = ctypes.structtype("objc_selector").ptr; let objc_g...
Introduction to DOM Inspector - Firefox Developer Tools
rules applying to pseudo-elements do not appear.
DOM allocation example - Firefox Developer Tools
foo"; for (var i = 0; i < toolbarbuttoncount; i++) { var toolbarbutton = createtoolbarbutton(); toolbar.appendchild(toolbarbutton); } return toolbar; } function createtoolbars() { var container = document.getelementbyid("container"); for (var i = 0; i < toolbarcount; i++) { var toolbar = createtoolbar(); container.appendchild(toolbar); } } createtoolbars(); a simple pseudocode representation of how this code operates looks like this: createtoolbars() -> createtoolbar() // called 200 times, creates 1 div element each time -> createtoolbarbutton() // called 20 times per toolbar, creates 1 span element each time in total, then, it creates 200 htmldivelement objects, and 4000 htmlspanelement objects.
Use the Inspector API - Firefox Developer Tools
pseudoclass called after toggle of a pseudoclass.
Work with animations - Firefox Developer Tools
starting in firefox 48, it will show animations applied to the ::before and ::after pseudo-elements.
Console messages - Firefox Developer Tools
many events can trigger reflows, including: resizing the browser window, activating pseudoclasses like :hover, or manipulating the dom in javascript.
Document.linkColor - Web APIs
as an alternative, you can set the css color property on either html anchor links (<a>) or on :link pseudo-classes.
Document.querySelector() - Web APIs
css pseudo-elements will never return any elements, as specified in the selectors api.
Document.vlinkColor - Web APIs
the recommended alternative is to get/set the color of the css :visited pseudo-class on html <a> elements (e.g., a:visited {color:red;}).
Element.getAnimations() - Web APIs
this includes animations that target any css pseudo-elements attached to element or one of its descendents.
Element: mouseenter event - Web APIs
combined with the corresponding mouseleave (which is fired at the element when the mouse exits its content area), the mouseenter event acts in a very similar way to the css :hover pseudo-class.
Element.part - Web APIs
WebAPIElementpart
these can be used to style parts of a shadow dom, via the ::part pseudo-element.
Element.scrollHeight - Web APIs
it can also include the height of pseudo-elements such as ::before or ::after.
Element.scrollWidth - Web APIs
it can also include the width of pseudo-elements such as ::before or ::after.
GeometryUtils - Web APIs
geometryutils is a raw interface and no object of this type can be created; it is implemented by text, element, csspseudoelement, and document objects.
HTMLButtonElement - Web APIs
with gecko-based browser, use the :-moz-submit-invalid pseudo-class to style submit buttons based on the validation of a form.
HTMLDialogElement.showModal() - Web APIs
it displays into the top layer, along with a ::backdrop pseudo-element.
HTMLElement.offsetHeight - Web APIs
it does not include the height of pseudo-elements such as ::before or ::after.
HTMLElement.offsetWidth - Web APIs
it does not include the width of pseudo-elements such as ::before or ::after.
HkdfParams - Web APIs
ideally, the salt is a random or pseudo-random value with the same length as the output of the digest function.
KeyframeEffectOptions - Web APIs
pseudoelement optional the selector of the pseudo-element to be targeted, if any.
ParentNode.querySelector() - Web APIs
note: if the specified selectors include a css pseudo-element, the returned value is always null.
Pbkdf2Params - Web APIs
this should be a random or pseudo-random value of at least 16 bytes.
SubtleCrypto - Web APIs
subtlecrypto.derivebits() returns a promise that fulfills with a newly generated buffer of pseudo-random bits derived from the master key and specific algorithm given as parameters.
ValidityState.patternMismatch - Web APIs
when true, the element matches the :invalid css pseudo-classes.
ValidityState.rangeOverflow - Web APIs
when true, the element matches the :invalid and :out-of-range css pseudo-classes.
ValidityState.rangeUnderflow - Web APIs
when true, the element matches the :invalid and :out-of-range css pseudo-classes.
ValidityState.stepMismatch - Web APIs
if true, the element matches the :invalid and :out-of-range css pseudo-classes.
Matrix math for the web - Web APIs
for instance, to scale something down by 80%, move it down 200 pixels, and then rotate about the origin 90 degrees would look something like the following in pseudo-code.
Writing WebSocket servers - Web APIs
in pseudo-code (that happens to be valid javascript): var decoded = ""; for (var i = 0; i < encoded.length; i++) { decoded[i] = encoded[i] ^ mask[i % 4]; } now you can figure out what decoded means depending on your application.
Window.frames - Web APIs
WebAPIWindowframes
each item in the window.frames pseudo-array represents the window object corresponding to the given <frame>'s or <iframe>'s content, not the (i)frame dom element (i.e., window.frames[0] is the same thing as document.getelementsbytagname("iframe")[0].contentwindow).
XMLHttpRequest - Web APIs
note: according to the http/2 specification (8.1.2.4 response pseudo-header fields), http/2 does not define a way to carry the version or reason phrase that is included in an http/1.1 status line.
msGetRegionContent - Web APIs
this is only available to regions that are document elements and not to regions that are pseudo-elements.
msRegionOverflow - Web APIs
however, it is only available to regions that are document elements and not to regions that are pseudo-elements.
Web APIs
WebAPI
broadcastchannel budgetservice budgetstate buffersource bytelengthqueuingstrategy bytestring c cdatasection css cssconditionrule csscounterstylerule cssgroupingrule cssimagevalue csskeyframerule csskeyframesrule csskeywordvalue cssmathproduct cssmathsum cssmathvalue cssmediarule cssnamespacerule cssnumericvalue cssomstring csspagerule csspositionvalue cssprimitivevalue csspseudoelement cssrule cssrulelist cssstyledeclaration cssstylerule cssstylesheet cssstylevalue csssupportsrule cssunitvalue cssunparsedvalue cssvalue cssvaluelist cssvariablereferencevalue cache cachestorage canvascapturemediastreamtrack canvasgradient canvasimagesource canvaspattern canvasrenderingcontext2d caretposition channelmergernode channelsplitternode characterdata childnod...
Using the alert role - Accessibility
the pseudo code snippet below illustrates this approach: <p id="forminstruction">you must select at least 3 options</p> // when the user tries to submit the form with less than 3 checkboxes selected: document.getelementbyid("forminstruction").setattribute("role", "alert"); example 4: making an element with an alert role visible if an element already has role="alert" and is initially hidden using css, m...
ARIA: switch role - Accessibility
"][aria-checked="true"] :first-child { color: #bbd; } label.switch { font: 16px "open sans", "arial", sans-serif; line-height: 20px; user-select: none; vertical-align: middle; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; -o-user-select: none; } the most interesting part is probably the use of attribute selectors and the :first-child and :last-child pseudo-classes to do all the heavy lifting of changing the appearance of the switch based on whether it's on or off.
Keyboard - Accessibility
you can do this with the :focus css pseudo-class.
:-moz-broken - CSS: Cascading Style Sheets
the :-moz-broken css pseudo-class is a mozilla extension that matches elements representing broken image links.
:-moz-drag-over - CSS: Cascading Style Sheets
the :-moz-drag-over css pseudo-class is a mozilla extension that matches an element when a dragover event is called on it.
:-moz-first-node - CSS: Cascading Style Sheets
the :-moz-first-node css pseudo-class is a mozilla extension that represents any element that is the first child node of some other element.
:-moz-handler-blocked - CSS: Cascading Style Sheets
the :-moz-handler-blocked css pseudo-class is a mozilla extension that matches elements that can't be displayed because their handlers have been blocked.
:-moz-handler-crashed - CSS: Cascading Style Sheets
the :-moz-handler-crashed css pseudo-class is a mozilla extension that matches elements that can't be displayed because the plugin responsible for drawing them has crashed.
:-moz-handler-disabled - CSS: Cascading Style Sheets
the :-moz-handler-disabled css pseudo-class is a mozilla extension that matches elements that can't be displayed because their handlers have been disabled by the user.
:-moz-last-node - CSS: Cascading Style Sheets
the :-moz-last-node css pseudo-class is a mozilla extension that represents any element that is the last child node of some other element.
::-moz-list-bullet - CSS: Cascading Style Sheets
the ::-moz-list-bullet css pseudo-element is a mozilla extension that represents the marker (typically a bullet) of a list item (<li>) in an unordered list (<ul>).
::-moz-list-number - CSS: Cascading Style Sheets
the ::-moz-list-number css pseudo-element is a mozilla extension that represents the marker (typically a number) of a list item (<li>) in an ordered list (<ol>).
:-moz-locale-dir(ltr) - CSS: Cascading Style Sheets
the :-moz-locale-dir(ltr) css pseudo-class is a mozilla extension that matches an element if the user interface is being displayed left-to-right.
:-moz-locale-dir(rtl) - CSS: Cascading Style Sheets
the :-moz-locale-dir(rtl) css pseudo-class is a mozilla extension that matches an element if the user interface is being displayed right-to-left.
:-moz-only-whitespace - CSS: Cascading Style Sheets
the :-moz-only-whitespace css pseudo-class matches elements that only contains text nodes that only contain whitespace.
:-moz-suppressed - CSS: Cascading Style Sheets
the :-moz-suppressed css pseudo-class is a mozilla extension that matches elements representing images that were suppressed because loading images from the specified site has been blocked.
:-moz-user-disabled - CSS: Cascading Style Sheets
the :-moz-user-disabled css pseudo-class is a mozilla extension that matches elements representing images that were not loaded because images have been entirely disabled by the user's preferences.
:-webkit-autofill - CSS: Cascading Style Sheets
the :-webkit-autofill css pseudo-class matches when an <input> element has its value autofilled by the browser.
::-moz-color-swatch - CSS: Cascading Style Sheets
the ::-moz-color-swatch css pseudo-element is a mozilla extension that represents the color selected in an <input> of type="color".
::-moz-focus-inner - CSS: Cascading Style Sheets
the ::-moz-focus-inner css pseudo-element is a mozilla extension that represents an inner focus ring of the <button> element as well as the button, submit, reset, and color types of the <input> element.
::-moz-page-sequence - CSS: Cascading Style Sheets
the ::-moz-page-sequence css pseudo-element is a mozilla extension that represents the background of a print preview.
::-moz-page - CSS: Cascading Style Sheets
the ::-moz-page css pseudo-element is a mozilla extension that represents an individual page when printed or in a print preview.
::-moz-progress-bar - CSS: Cascading Style Sheets
the ::-moz-progress-bar css pseudo-element is a mozilla extension that represents the progress bar inside a <progress> element.
::-moz-range-progress - CSS: Cascading Style Sheets
the ::-moz-range-progress css pseudo-element is a mozilla extension that represents the lower portion of the track (i.e., groove) in which the indicator slides in an <input> of type="range".
::-moz-range-thumb - CSS: Cascading Style Sheets
the ::-moz-range-thumb css pseudo-element is a mozilla extension that represents the thumb (i.e., virtual knob) of an <input> of type="range".
::-moz-range-track - CSS: Cascading Style Sheets
the ::-moz-range-track css pseudo-element is a mozilla extension that represents the track (i.e., groove) in which the indicator slides in an <input> of type="range".
::-moz-scrolled-page-sequence - CSS: Cascading Style Sheets
the ::-moz-scrolled-page-sequence css pseudo-element is a mozilla extension that represents the background of a print preview.
::-webkit-inner-spin-button - CSS: Cascading Style Sheets
the ::-webkit-inner-spin-button css pseudo-element is used to style the inner part of the spinner button of number picker input elements.
::-webkit-meter-bar - CSS: Cascading Style Sheets
the ::-webkit-meter-bar css pseudo-class is a webkit extension that represents the meter bar in a <meter> element.
::-webkit-meter-inner-element - CSS: Cascading Style Sheets
::-webkit-meter-inner-element is a proprietary webkit css pseudo-element for selecting and applying styles to to the outer containing element of a <meter> element.
::-webkit-meter-optimum-value - CSS: Cascading Style Sheets
the ::-webkit-meter-optimum-value css pseudo-element styles the <meter> element when its value is inside the low-high range.
::-webkit-meter-suboptimum-value - CSS: Cascading Style Sheets
the ::-webkit-meter-suboptimum-value pseudo-element gives a yellow color to the <meter> element when the value attribute falls outside of the low-high range.
::-webkit-outer-spin-button - CSS: Cascading Style Sheets
the ::-webkit-outer-spin-button css pseudo-element is used to style the outer part of the spinner button of number picker <input> elements.
::-webkit-slider-runnable-track - CSS: Cascading Style Sheets
the ::-webkit-slider-runnable-track css pseudo-element represents the "track" (the groove in which the indicator slides) of an <input type="range">.
::-webkit-slider-thumb - CSS: Cascading Style Sheets
the ::-webkit-slider-thumb css pseudo-element represents the "thumb" that the user can move within the "groove" of an <input> of type="range" to alter its numerical value.
::cue - CSS: Cascading Style Sheets
WebCSS::cue
the ::cue css pseudo-element matches webvtt cues within a selected element.
::part() - CSS: Cascading Style Sheets
WebCSS::part
the ::part css pseudo-element represents any element within a shadow tree that has a matching part attribute.
:any-link - CSS: Cascading Style Sheets
WebCSS:any-link
the :any-link css pseudo-class selector represents an element that acts as the source anchor of a hyperlink, independent of whether it has been visited.
:first-child - CSS: Cascading Style Sheets
the :first-child css pseudo-class represents the first element among a group of sibling elements.
:first-of-type - CSS: Cascading Style Sheets
the :first-of-type css pseudo-class represents the first element of its type among a group of sibling elements.
:host - CSS: Cascading Style Sheets
WebCSS:host
the :host css pseudo-class selects the shadow host of the shadow dom containing the css it is used inside — in other words, this allows you to select a custom element from inside its shadow dom.
:indeterminate - CSS: Cascading Style Sheets
the :indeterminate css pseudo-class represents any form element whose state is indeterminate, such as checkboxes which have their html indeterminate attribute set to true, radio buttons which are members of a group in which all radio buttons are unchecked, and indeterminate <progress> elements.
:last-child - CSS: Cascading Style Sheets
the :last-child css pseudo-class represents the last element among a group of sibling elements.
:last-of-type - CSS: Cascading Style Sheets
the :last-of-type css pseudo-class represents the last element of its type among a group of sibling elements.
:only-child - CSS: Cascading Style Sheets
the :only-child css pseudo-class represents an element without any siblings.
:only-of-type - CSS: Cascading Style Sheets
the :only-of-type css pseudo-class represents an element that has no siblings of the same type.
:placeholder-shown - CSS: Cascading Style Sheets
the :placeholder-shown css pseudo-class represents any <input> or <textarea> element that is currently displaying placeholder text.
:root - CSS: Cascading Style Sheets
WebCSS:root
the :root css pseudo-class matches the root element of a tree representing the document.
:state() - CSS: Cascading Style Sheets
WebCSS:state
the :state css pseudo-class represents any custom element with the specified custom state in elementinternals.states.
CSS Paged Media - CSS: Cascading Style Sheets
WebCSSCSS Pages
reference css properties page-break-after page-break-before page-break-inside at-rules @page pseudo-classes :blank :first :left :right specifications specification status comment css paged media module level 3 working draft css fragmentation module level 3 candidate recommendation css level 2 (revision 1) recommendation ...
Microsoft CSS extensions - CSS: Cascading Style Sheets
olor -ms-scrollbar-track-color -ms-scroll-chaining -ms-scroll-limit -ms-scroll-limit-x-max -ms-scroll-limit-x-min -ms-scroll-limit-y-max -ms-scroll-limit-y-min -ms-scroll-rails -ms-scroll-snap-points-x -ms-scroll-snap-points-y -ms-scroll-snap-x -ms-scroll-snap-y -ms-scroll-translation -ms-text-autospace -ms-touch-select -ms-wrap-flow -ms-wrap-margin -ms-wrap-through zoom pseudo-elements ::-ms-browse ::-ms-check ::-ms-clear ::-ms-expand ::-ms-fill ::-ms-fill-lower ::-ms-fill-upper ::-ms-reveal ::-ms-thumb ::-ms-ticks-after ::-ms-ticks-before ::-ms-tooltip ::-ms-track ::-ms-value media features -ms-high-contrast css-related dom apis mscontentzoomfactor msgetpropertyenabled msgetregioncontent msrangecollection msregionoverflow ...
Syntax - CSS: Cascading Style Sheets
WebCSSSyntax
this leads to an important consequence: if one single basic selector is invalid, like when using an unknown pseudo-element or pseudo-class, the whole selector is invalid and therefore the entire rule is ignored (as invalid too).
Universal selectors - CSS: Cascading Style Sheets
recommendation defines behavior regarding namespaces and adds hint that omitting the selector is allowed within pseudo-elements css level 2 (revision 1)the definition of 'universal selector' in that specification.
Visual formatting model - CSS: Cascading Style Sheets
each box in the box tree represents its corresponding element (or pseudo-element) in space and/or time on the canvas, while each text run in the box tree likewise represents the contents of its corresponding text nodes.
animation-delay - CSS: Cascading Style Sheets
formal definition initial value0sapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <time># examples see css animations for examples.
animation-direction - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <single-animation-direction>#where <single-animation-direction> = normal | reverse | alternate | alternate-reverse examples see css animations for examples.
animation-duration - CSS: Cascading Style Sheets
formal definition initial value0sapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <time># examples see css animations for examples.
animation-fill-mode - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <single-animation-fill-mode>#where <single-animation-fill-mode> = none | forwards | backwards | both examples you can see the effect of animation-fill-mode in the following example.
animation-iteration-count - CSS: Cascading Style Sheets
formal definition initial value1applies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <single-animation-iteration-count>#where <single-animation-iteration-count> = infinite | <number> examples see css animations for examples.
animation-name - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ none | <keyframes-name> ]#where <keyframes-name> = <custom-ident> | <string> examples see css animations for examples.
animation-play-state - CSS: Cascading Style Sheets
formal definition initial valuerunningapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <single-animation-play-state>#where <single-animation-play-state> = running | paused examples see css animations for examples.
animation-timing-function - CSS: Cascading Style Sheets
formal definition initial valueeaseapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <timing-function>#where <timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>where <cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinato...
animation - CSS: Cascading Style Sheets
WebCSSanimation
anations understanding success criterion 2.2.2 | w3c understanding wcag 2.0 formal definition initial valueas each of the properties of the shorthand:animation-name: noneanimation-duration: 0sanimation-timing-function: easeanimation-delay: 0sanimation-iteration-count: 1animation-direction: normalanimation-fill-mode: noneanimation-play-state: runningapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas each of the properties of the shorthand:animation-name: as specifiedanimation-duration: as specifiedanimation-timing-function: as specifiedanimation-delay: as specifiedanimation-direction: as specifiedanimation-iteration-count: as specifiedanimation-fill-mode: as specifiedanimation-play-state: as specifiedanimation typediscrete formal syntax <single-animation...
attr() - CSS: Cascading Style Sheets
WebCSSattr
it can also be used on pseudo-elements, in which case the value of the attribute on the pseudo-element's originating element is returned.
clear - CSS: Cascading Style Sheets
WebCSSclear
this is called clearfix, and one way to do it is to add clear to a replaced ::after pseudo-element on it.
counter() - CSS: Cascading Style Sheets
WebCSScounter
it is generally used with pseudo-elements, but can be used, theoretically, anywhere a <string> value is supported.
counters() - CSS: Cascading Style Sheets
WebCSScounters
it is generally used with pseudo-elements, but can be used, theoretically, anywhere a <string> value is supported.
<custom-ident> - CSS: Cascading Style Sheets
makes it a pseudo-type and forbids the use of excluded values.
<display-box> - CSS: Cascading Style Sheets
they are replaced by their pseudo-box and their child boxes.
<display-listitem> - CSS: Cascading Style Sheets
the list-item keyword causes the element to generate a ::marker pseudo-element with the content specified by its list-style properties (for example a bullet point) together with a principal box of the specified type for its own contents.
display - CSS: Cascading Style Sheets
WebCSSdisplay
they are replaced by their pseudo-box and their child boxes.
flex-basis - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toflex items, including in-flow pseudo-elementsinheritednopercentagesrefer to the flex container's inner main sizecomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea length, percentage or calc(); formal syntax content | <'width'> examples setting flex item initial sizes html <ul class="container"> <li class="flex flex1">1: flex-basis test</li> <li class="flex flex2">2: flex-ba...
flex-grow - CSS: Cascading Style Sheets
WebCSSflex-grow
formal definition initial value0applies toflex items, including in-flow pseudo-elementsinheritednocomputed valueas specifiedanimation typea number formal syntax <number> examples setting flex item grow factor html <h4>this is a flex-grow</h4> <h5>a,b,c and f are flex-grow:1 .
flex-shrink - CSS: Cascading Style Sheets
formal definition initial value1applies toflex items, including in-flow pseudo-elementsinheritednocomputed valueas specifiedanimation typea number formal syntax <number> examples setting flex item shrink factor html <p>the width of content is 500px; the flex-basis of the flex items is 120px.</p> <p>a, b, c have flex-shrink:1 set.
flex - CSS: Cascading Style Sheets
WebCSSflex
formal definition initial valueas each of the properties of the shorthand:flex-grow: 0flex-shrink: 1flex-basis: autoapplies toflex items, including in-flow pseudo-elementsinheritednocomputed valueas each of the properties of the shorthand:flex-grow: as specifiedflex-shrink: as specifiedflex-basis: as specified, but with relative lengths converted into absolute lengthsanimation typeas each of the properties of the shorthand:flex-grow: a numberflex-shrink: a numberflex-basis: a length, percentage or calc(); formal syntax none | [ <'flex-grow'> <'flex-shrin...
<image> - CSS: Cascading Style Sheets
WebCSSimage
if supported, the browser-defined size matching the usual cursor size on the client's system content for a pseudo-element (::after/::before) a 300px × 150px rectangle the concrete object size is calculated using the following algorithm: if the specified size defines both the width and the height, these values are used as the concrete object size.
initial-letter-align - CSS: Cascading Style Sheets
formal definition initial valueautoapplies to::first-letter pseudo-elements and inline-level first child of a block containerinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ auto | alphabetic | hanging | ideographic ] examples aligning initial letter html <p class="auto ">initial letter - auto</p> <p class="alphabetic">initial letter - alphabetic</p> <p class="hanging">initial letter - hanging</p> <p class="ideographic">initial l...
initial-letter - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies to::first-letter pseudo-elements and inline-level first child of a block containerinheritednocomputed valueas specifiedanimation typediscrete formal syntax normal | [ <number> <integer>?
list-style-type - CSS: Cascading Style Sheets
to address this, add a zero-width space as pseudo content before each list item to ensure the list is announced properly.
list-style - CSS: Cascading Style Sheets
to address this, add a zero-width space as pseudo-content before each list item to ensure the list is recognized properly.
text-shadow - CSS: Cascading Style Sheets
this property applies to both ::first-line and ::first-letter pseudo-elements.
transition-delay - CSS: Cascading Style Sheets
formal definition initial value0sapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <time># examples transition-delay: 0.5s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition...
transition-duration - CSS: Cascading Style Sheets
formal definition initial value0sapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <time># examples transition-duration: 0.5s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transit...
transition-property - CSS: Cascading Style Sheets
formal definition initial valueallapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax none | <single-transition-property>#where <single-transition-property> = all | <custom-ident> examples there are several examples of css transitions included in the main css transitions article.
transition-timing-function - CSS: Cascading Style Sheets
formal definition initial valueeaseapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <timing-function>#where <timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>where <cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinato...
user-select - CSS: Cascading Style Sheets
auto the used value of auto is determined as follows: on the ::before and ::after pseudo elements, the used value is none if the element is an editable element, the used value is contain otherwise, if the used value of user-select on the parent of this element is all, the used value is all otherwise, if the used value of user-select on the parent of this element is none, the used value is none otherwise, the used value is text text the text can be selected by the user.
Adding captions and subtitles to HTML5 video - Developer guides
the ::cue pseudo-element is the key to targetting individual text track cues for styling, as it matches any defined cue.
Challenge solutions - Developer guides
solution move the position of the :hover pseudo-class from a specific petal, to all petals #inner-petals { --segment-fill-fill-hover: pink; } /* non-standard way for some older browsers */ #inner-petals:hover .segment-fill { fill: pink; stroke: none; } ...
Introduction to Web development - Developer guides
common css questions — common questions and answers for beginners intermediate css concepts — grouping, pseudo-classes and more.
Mobile Web Development - Developer guides
WebGuideMobile
you won't be able to use the css :hover pseudo-class, and will need to design clickable items like buttons to respect the fact that fingers are fatter than mouse pointers.
HTML attribute: min - HTML: Hypertext Markup Language
WebHTMLAttributesmin
yyy-mm-ddthh:mm <input type="datetime-local" min="2019-12-25t19:30"> number <number> <input type="number" min="0" step="5" max="100"> range <number> <input type="range" min="60" step="5" max="100"> note: when the data entered by the user doesn't adhere to the min value set, the value is considered invalid in contraint validation and will match the :invalid pseudoclass see client-side validation and rangeunderflow for more information.
HTML attribute: minlength - HTML: Hypertext Markup Language
<label for="fruit">enter a fruit name that is at least 5 letters long</label> <input type="text" minlength="5" id="fruit"> we can use pseudoclasses to style the element based on whether the value is valid.
HTML attribute: multiple - HTML: Hypertext Markup Language
the email input displays the same, but will match the :invalid pseudo-class if more than one comma-separated email address is included if the attribute is not present.
HTML attribute: pattern - HTML: Hypertext Markup Language
when true, the element matches the :invalid css pseudo-classes.
HTML attribute: step - HTML: Hypertext Markup Language
WebHTMLAttributesstep
the number spinner, if present, will only show valid float values of 1.2 and greater note: when the data entered by the user doesn't adhere to the stepping configuration, the value is considered invalid in contraint validation and will match the :invalid and :out-of-range pseudoclasses see client-side validation and stepmismatch for more information.
<button>: The Button element - HTML: Hypertext Markup Language
WebHTMLElementbutton
you can add inner html content (think <i>, <br>, or even <img>), and use ::after and ::before pseudo-elements for complex rendering.
<del>: The Deleted Text element - HTML: Hypertext Markup Language
WebHTMLElementdel
it can be made to be announced by using the css content property, along with the ::before and ::after pseudo-elements.
<details>: The Details disclosure element - HTML: Hypertext Markup Language
WebHTMLElementdetails
chrome doesn't support this yet, however, so we also need to use its non-standard ::-webkit-details-marker pseudo-element to customize the appearance in that browser.
<dialog>: The Dialog element - HTML: Hypertext Markup Language
WebHTMLElementdialog
the ::backdrop css pseudo-element can be used to style behind a <dialog> element when the dialog is displayed with htmldialogelement.showmodal().
<form> - HTML: Hypertext Markup Language
WebHTMLElementform
it is possible to use the :valid and :invalid css pseudo-classes to style a <form> element based on whether or not the elements inside the form are valid.
<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
WebHTMLElementiframe
scripting inline frames, like <frame> elements, are included in the window.frames pseudo-array.
<input type="color"> - HTML: Hypertext Markup Language
WebHTMLElementinputcolor
if and when this is the case, the :invalid pseudo-class is applied to the element.
<input type="date"> - HTML: Hypertext Markup Language
WebHTMLElementinputdate
we make use of the :valid and :invalid pseudo-elements to add an icon next to the input, based on whether or not the current value is valid.
<input type="email"> - HTML: Hypertext Markup Language
WebHTMLElementinputemail
the :valid and :invalid css pseudo-classes are automatically applied as appropriate to visually denote whether the current value of the field is a valid e-mail address or not.
<input type="number"> - HTML: Hypertext Markup Language
WebHTMLElementinputnumber
the css applied to this example is as follows: div { margin-bottom: 10px; } input:invalid+span:after { content: '✖'; padding-left: 5px; } input:valid+span:after { content: '✓'; padding-left: 5px; } here we use the :invalid and :valid pseudo classes to display an appropriate invalid or valid icon as generated content on the adjacent <span> element, as a visual indicator of validity.
<input type="radio"> - HTML: Hypertext Markup Language
WebHTMLElementinputradio
notice also how the :checked pseudo-class is used to specify the styles for the radio button's appearance when selected.
<input type="search"> - HTML: Hypertext Markup Language
WebHTMLElementinputsearch
a note on styling there are useful pseudo-classes available for styling valid/invalid form elements: :valid and :invalid.
<input type="text"> - HTML: Hypertext Markup Language
WebHTMLElementinputtext
a note on styling there are useful pseudo-classes available for styling form elements to help the user see when their values are valid or invalid.
<input type="url"> - HTML: Hypertext Markup Language
WebHTMLElementinputurl
the :valid and :invalid css pseudo-classes are automatically applied as appropriate to visually denote whether the current value of the field is a valid url or not.
<ins> - HTML: Hypertext Markup Language
WebHTMLElementins
it can be made to be announced by using the css content property, along with the ::before and ::after pseudo-elements.
<mark>: The Mark Text element - HTML: Hypertext Markup Language
WebHTMLElementmark
it can be made to be announced by using the css content property, along with the ::before and ::after pseudo-elements.
<progress>: The Progress Indicator element - HTML: Hypertext Markup Language
WebHTMLElementprogress
note: the :indeterminate pseudo-class can be used to match against indeterminate progress bars.
<s> - HTML: Hypertext Markup Language
WebHTMLElements
it can be made to be announced by using the css content property, along with the ::before and ::after pseudo-elements.
<textarea> - HTML: Hypertext Markup Language
WebHTMLElementtextarea
those within, and outside the bounds set by minlength, maxlength, or required) can be highlighted using the :valid and :invalid pseudo-classes.
lang - HTML: Hypertext Markup Language
for the css pseudo-class :lang, two invalid language names are different if their names are different.
part - HTML: Hypertext Markup Language
part names allows css to select and style specific elements in a shadow tree via the ::part pseudo-element.
Global attributes - HTML: Hypertext Markup Language
part names allows css to select and style specific elements in a shadow tree via the ::part pseudo-element.
HTML documentation index - HTML: Hypertext Markup Language
WebHTMLIndex
part names allows css to select and style specific elements in a shadow tree via the ::part pseudo-element.
Warning - HTTP
WebHTTPHeadersWarning
<warn-agent> the name or pseudonym of the server or software adding the warning header (might be "-" when the agent is unknown).
Math.sign() - JavaScript
return ((x > 0) - (x < 0)) || +x; // a more aesthetic pseudo-representation: // // ( (x > 0) ?
Math - JavaScript
math.random() returns a pseudo-random number between 0 and 1.
String.prototype.charCodeAt() - JavaScript
this is because the higher code points are represented by a pair of (lower valued) "surrogate" pseudo-characters which are used to comprise the real character.
void operator - JavaScript
for example: <a href="javascript:void(0);"> click here to do nothing </a> <a href="javascript:void(document.body.style.backgroundcolor='green');"> click here for green background </a> note: javascript: pseudo protocol is discouraged over other alternatives, such as unobtrusive event handlers.
seed - SVG: Scalable Vector Graphics
WebSVGAttributeseed
the seed attribute represents the starting number for the pseudo random number generator of the <feturbulence> filter primitive.
SVG documentation index - SVG: Scalable Vector Graphics
WebSVGIndex
184 seed filters, svg, svg attribute the seed attribute represents the starting number for the pseudo random number generator of the <feturbulence> filter primitive.
Example - SVG: Scalable Vector Graphics
// warning: pseudo-physics -- not really // governed by any /real/ physical principles.
Fills and Strokes - SVG: Scalable Vector Graphics
you can also use things like the :hover pseudo class to create rollover effects: #myrect:hover { stroke: black; fill: blue; } you can also specify an external stylesheet for your css rules through normal xml-stylesheet syntax: <?xml version="1.0" standalone="no"?> <?xml-stylesheet type="text/css" href="style.css"?> <svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect height="10" width="10" id="m...
SVG and CSS - SVG: Scalable Vector Graphics
this behavior is standardized, though only a few browsers support the :hover pseudo-class and other more complex css selectors on elements referenced via <use> elements, at the moment.
<xsl:stylesheet> - XSLT: Extensible Stylesheet Language Transformations
namespace declaration a pseudo-attribute required to identify the document as an xslt stylesheet.
PI Parameters - XSLT: Extensible Stylesheet Language Transformations
both pis can contain "pseudo attributes" the same way that the xml-stylesheet pi does.
An Overview - XSLT: Extensible Stylesheet Language Transformations
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/xsl/transform" version="1.0"> the xmlns pseudo-attribute maps the shorthand name xsl onto the full namespace for use throughout the document that follows.