William Jiang

JavaScript,PHP,Node,Perl,LAMP Web Developer – http://williamjxj.com; https://github.com/williamjxj?tab=repositories

Tag Archives: css3

CSS3 modules, selectors List

CSS3 modules, selectors List

Unlike CSS2, which is a large single specification defining various features, CSS3 is divided into several separate documents called “modules”. Each module adds new capabilities or extends features defined in CSS2, over preserving backward compatibility.

Due to the modularization, different modules have different stability and statuses. There are over 50 CSS modules published from the CSS Working Group. 3 of them―Selectors Level 3Namespaces and Color― became W3C Recommendations in 2011.

Here are update-to-date CSS3 Module Status:

http://www.css3.info/modules/

Here I list CSS 3 Selectors, which is more rich than CSS 2 selectors.

Pattern Meaning
* any element
E an element of type E
E[foo] an E element with a “foo” attribute
E[foo=”bar”] an E element whose “foo” attribute value is exactly
equal to “bar”
E[foo~=”bar”] an E element whose “foo” attribute value is a list of
whitespace-separated values, one of which is exactly equal to “bar”
E[foo^=”bar”] an E element whose “foo” attribute value begins
exactly with the string “bar”
E[foo$=”bar”] an E element whose “foo” attribute value ends exactly
with the string “bar”
E[foo*=”bar”] an E element whose “foo” attribute value contains the
substring “bar”
E[foo|=”en”] an E element whose “foo” attribute has a
hyphen-separated list of values beginning (from the left) with “en”
E:root an E element, root of the document
E:nth-child(n) an E element, the n-th child of its parent
E:nth-last-child(n) an E element, the n-th child of its parent, counting
from the last one
E:nth-of-type(n) an E element, the n-th sibling of its type
E:nth-last-of-type(n) an E element, the n-th sibling of its type, counting
from the last one
E:first-child an E element, first child of its parent
E:last-child an E element, last child of its parent
E:first-of-type an E element, first sibling of its type
E:last-of-type an E element, last sibling of its type
E:only-child an E element, only child of its parent
E:only-of-type an E element, only sibling of its type
E:empty an E element that has no children (including text
nodes)
E:link
E:visited
an E element being the source anchor of a hyperlink of
which the target is not yet visited (:link) or already visited
(:visited)
E:active
E:hover
E:focus
an E element during certain user actions
E:target an E element being the target of the referring URI
E:lang(fr) an element of type E in language “fr” (the document
language specifies how language is determined)
E:enabled
E:disabled
a user interface element E which is enabled or
disabled
E:checked
<!–
E:indeterminate–>
a user interface element E which is
checked

(for instance a
radio-button or checkbox)

E::first-line the first formatted line of an E element
E::first-letter the first formatted letter of an E element
E::before generated content before an E element
E::after generated content after an E element
E.warning an E element whose class is “warning” (the document
language specifies how class is determined).
E#myid an E element with ID equal to “myid”.
E:not(s) an E element that does not match simple selector s
E F an F element descendant of an E element
E > F an F element child of an E element
E + F an F element immediately preceded by an E element
E ~ F an F element preceded by an E element
Advertisements

HTML5 & CSS3

HTML5 & CSS3

While searching HTML5’s selector new attributes, I found a helpful website:

http://html.nhndesign.com/html_guide/?css3

You can find some useful information about the new features in HTML5 and CSS3, including live examples and browser compatibility. With the reference, I add a CSS class by using selector:

#contents .box::first-letter {
  font-size: 2.5em;
  color: #990000;
  weight: bolder;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #d1e8ed;
}

This will make the first letter of a paragraph to be more eye-catching.