Search completed in 0.93 seconds.
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 css
pseudoelement 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 css
pseudoelement.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 css
pseudoelement interface returns a reference to the originating element of the
pseudo-element, in other words its parent element.
... syntax var originatingelement = css
pseudoelement.element; value an element representing the
pseudo-element's originating element.
... examples the example below demonstrates the relationship between css
pseudoelement.element and element.
pseudo(): const myelement = document.queryselector('q'); const css
pseudoelement = myelement.
pseudo('::after'); const originatingelement = css
pseudoelement.element; console.log(myelement === originatingelement); // outputs true console.log(myelement.parentelement === originatingelement); // outputs false console.log(myelement.lastelementchild === css
pseudoelement); // outputs false console.log(myelement.lastchild === css
pseudoelement); // outputs false console.log(myelement.nextelementsibling === css
pseudoelement); // outputs false console.log(myelement.nextsibling === css
pseudoelement); // 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.
CSSPseudoElement.type - Web APIs
the type read-only property of the css
pseudoelement interface returns the type of the
pseudo-element as a string, represented in the form of a css selector.
... syntax var typeof
pseudoelement = css
pseudoelement.type; value a cssomstring containing one of the following values: "::before" "::after" "::marker" examples the example below demonstrates the relationship between css
pseudoelement.type and element.
pseudo(): const myelement = document.queryselector('q'); const myselector = '::after'; const css
pseudoelement = myelement.
pseudo(myselector); const typeof
pseudoelement = css
pseudoelement.type; console.log(myselector === typeof
pseudoelement); // outputs true specifications specification status comment css
pseudo-elements level 4the definition of 'type' in that specification.
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 add
pseudoclasslock(in nsidomelement aelement, in domstring a
pseudoclass); void clear
pseudoclasslocks(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 a
pseudo); 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 has
pseudoclasslock(in nsidomelement aelement, in domstring a
pseudoclass); boolean isignorablewhitespace(in nsidomcharacterdata adatanode); bool isinheritedproperty(in astring apropertyname); void parsestylesheet(in nsidomcssstylesheet asheet, in domstring ainput); void remove
pseudoclasslock(in nsidomelement aelement, in domstring a
pseudoclass); 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 a
pseudo); void setcontentstate(in nsidomelement aelement, in unsigned long long astate); constants...
...And 15 more matches
CSS - Archive of obsolete content
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
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
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 css
pseudoelement api, css
pseudoelement, element, experimental, interface, reference the css
pseudoelement 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::resolve
pseudostylecontextfor, and.nsiprescontext::resolvestylecontextfornonelement there is also a fourth method, nsiprescontext::probe
pseudostylecontextfor, 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
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
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
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
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
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
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
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
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.by
pseudo(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," "));},by
pseudo: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
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
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
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 a
pseudoelement, 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, a
pseudoelement).
... astring getvisiteddependentcomputedstyle( in nsidomelement aelement, in astring a
pseudoelement, in astring apropertyname ); parameters aelement a
pseudoelement 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
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
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
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
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
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
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.
... resolve
pseudostylecontextfor: 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
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: a
pseudoelementname}); 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
element.
pseudo() returns a css
pseudoelement 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: a
pseudoelementname}); 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
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
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
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
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
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
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
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(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.
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 (<, >, &, " and ') 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, css
pseudoelement, 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
"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-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
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
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
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).
:first - CSS: Cascading Style Sheets
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
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
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
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
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
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
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
| <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
<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
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
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]().
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...
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...
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...
-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.
::-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-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.
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...
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 ...
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
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 ...
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.
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.
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.
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.
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.
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 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: next
pseudomsgkey nsmsgkey for undo-redo of move pop->imap.
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...
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.
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.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: 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.
GeometryUtils - Web APIs
geometryutils is a raw interface and no object of this type can be created; it is implemented by text, element, css
pseudoelement, 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.
HkdfParams - Web APIs
ideally, the salt is a random or
pseudo-random value with the same length as the output of the digest function.
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.
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
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.
msRegionOverflow - Web APIs
however, it is only available to regions that are document elements and not to regions that are
pseudo-elements.
Web APIs
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 css
pseudoelement 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.
:-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.
::-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.
:host - CSS: Cascading Style Sheets
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.
CSS Paged Media - CSS: Cascading Style Sheets
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
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
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...
<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.
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
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
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
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>?
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.
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; } ...
Mobile Web Development - Developer guides
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
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: step - HTML: Hypertext Markup Language
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.
<input type="number"> - HTML: Hypertext Markup Language
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.