Главная » Языки программирования

Css selector for name

Содержание
  1. CSS Selector for name attribute of ?
  2. 4 Answers 4
  3. Attribute selectors
  4. Syntax
  5. Examples
  6. Links
  7. CSS
  8. HTML
  9. Result
  10. Languages
  11. CSS
  12. HTML
  13. Result
  14. HTML ordered lists
  15. CSS
  16. HTML
  17. Result
  18. Specifications
  19. Browser compatibility
  20. See also
  21. Found a content problem with this page?
  22. MDN
  23. Support
  24. Our communities
  25. Developers

CSS Selector for name attribute of ?

The name attribute for anchors has been removed from HTML as of HTML 5. Put an ID on the element you want to link to instead.

@Quentin: Huh. So it has. I was under the impression it was simply deprecated. Edit: so it turns out when HTML5 says «obsolete» it can mean either «obsolete» or «deprecated» — checker.html5.org says that the name attribute is obsolete but it emits a warning, not an error unlike for things such as presentational attrs.

4 Answers 4

CSS doesn’t have a specific selector syntax for name attributes. You have to use the generic attribute selector syntax.

[att=val] Represents an element with the att attribute whose value is exactly «val».

There is the [name=»name»] selector but it’s not really cross-browser. Old versions of Internet Explorer don’t support the selector by HTML attribute (that browser tho. ).

My suggestion is to always use class es for CSS (even for unique elements) and id s for JavaScript, while you’ll leave the name s for backend programming.

Add a class to the element and then a.myclass

If you want to build a real website you should support even the most awful browsers, as long as they respect the HTML and CSS standards. And as I said, it’s better if names are reserved for the backend programming.

Читайте также:  Simple java programming language

@Quentin — Nobody hopefully, though they might be using IE11 in «compatibility mode». There are, unfortunately, still corporate legacy apps that require quirks mode.

Источник

Attribute selectors

The CSS attribute selector matches elements based on the element having a given attribute explicitly set, with options for defining an attribute value or substring value match.

The case sensitivity of attribute names and values depends on the document language. In HTML, attribute names are case insensitive, as are spec-defined enumerated values. The case-insensitive HTML attribute values are listed in the HTML spec. For these attributes, the attribute value in the selector is case-insensitive, regardless of whether the value is invalid or the attribute for the element on which it is set is invalid.

If the attribute value is case sensitive, like class , id , and data-* attributes, the attribute selector value match is case-sensitive. Attributes defined outside of the HTML specification, like role and aria-* attributes, are also case-sensitive. Normally case-sensitive attribute selectors can be made case-insensitive with the inclusion of the case-insensitive modifier ( i ).

Syntax

Represents elements with an attribute name of attr.

Represents elements with an attribute name of attr whose value is exactly value.

Represents elements with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly value.

Represents elements with an attribute name of attr whose value can be exactly value or can begin with value immediately followed by a hyphen, — (U+002D). It is often used for language subcode matches.

Represents elements with an attribute name of attr whose value is prefixed (preceded) by value.

Represents elements with an attribute name of attr whose value is suffixed (followed) by value.

Represents elements with an attribute name of attr whose value contains at least one occurrence of value within the string.

Adding an i (or I ) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range).

[attr operator value s] Experimental

Adding an s (or S ) before the closing bracket causes the value to be compared case-sensitively (for characters within the ASCII range).

Examples

CSS

a  color: blue; > /* Internal links, beginning with "#" */ a[href^="#"]  background-color: gold; > /* Links with "example" anywhere in the URL */ a[href*="example"]  background-color: silver; > /* Links with "insensitive" anywhere in the URL, regardless of capitalization */ a[href*="insensitive" i]  color: cyan; > /* Links with "cAsE" anywhere in the URL, with matching capitalization */ a[href*="cAsE" s]  color: pink; > /* Links that end in ".org" */ a[href$=".org"]  color: red; > /* Links that start with "https://" and end in ".org" */ a[href^="https://"][href$=".org"]  color: green; >

HTML

ul> li>a href="#internal">Internal linka>li> li>a href="http://example.com">Example linka>li> li>a href="#InSensitive">Insensitive internal linka>li> li>a href="http://example.org">Example org linka>li> li>a href="https://example.org">Example https org linka>li> ul>

Result

Languages

CSS

/* All divs with a `lang` attribute are bold. */ div[lang]  font-weight: bold; > /* All divs without a `lang` attribute are italicized. */ div:not([lang])  font-style: italic; > /* All divs in US English are blue. */ div[lang~="en-us"]  color: blue; > /* All divs in Portuguese are green. */ div[lang="pt"]  color: green; > /* All divs in Chinese are red, whether simplified (zh-Hans-CN) or traditional (zh-Hant-TW). */ div[lang|="zh"]  color: red; > /* All divs with a Traditional Chinese `data-lang` are purple. */ /* Note: You could also use hyphenated attributes without double quotes */ div[data-lang="zh-Hant-TW"]  color: purple; >

HTML

div lang="en-us en-gb en-au en-nz">Hello World!div> div lang="pt">Olá Mundo!div> div lang="zh-Hans-CN">世界您好！div> div lang="zh-Hant-TW">世界您好！div> div data-lang="zh-Hant-TW">世界您好！div>

Result

HTML ordered lists

The HTML specification requires the type attribute to be matched case-insensitively because it is primarily used in the element. Note that if a modifier is not supported by the user agent, then the selector will not match.

CSS

/* Case-sensitivity depends on document language */ ol[type="a"]  list-style-type: lower-alpha; background: red; > ol[type="b" s]  list-style-type: lower-alpha; background: lime; > ol[type="B" s]  list-style-type: upper-alpha; background: grey; > ol[type="c" i]  list-style-type: upper-alpha; background: green; >

HTML

ol type="A"> li> Red background for case-insensitive matching (default for the type selector) li> ol> ol type="b"> li>Lime background if `s` modifier is supported (case-sensitive match)li> ol> ol type="B"> li>Grey background if `s` modifier is supported (case-sensitive match)li> ol> ol type="C"> li> Green background if `i` modifier is supported (case-insensitive match) li> ol>

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

  • attr()
  • Selecting a single element: Document.querySelector() , DocumentFragment.querySelector() , or Element.querySelector()
  • Selecting all matching elements: Document.querySelectorAll() , DocumentFragment.querySelectorAll() , or Element.querySelectorAll()
  • Case-insensitive attribute selector values on WHATWG

Found a content problem with this page?

This page was last modified on Jun 29, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Оцените статью
© 2024 Программирование