WNAS

Web developer

CSS 3 selectors explained In real code

As I have learned a lot from this article by Roger Johansson over the years, I decided that a more practical approach could be usefull for some people.

So I decided to try and reproduce the article with the selectors working in the page. This should help some people who are more practical and can't see past the E[attr$"val"]

Substring matching attribute selector

p[data-css3^="foo"] {
    color: green;
}

<p data-css3="foo-VALUE">

Matches any p element whose data-css3 attribute value begins with "foo".

p[data-css3$="bar"]{
    color: red;
}

<p data-css3="VALUE-bar">

Matches any p element whose data-css3 attribute value ends with "bar".

p[data-css3*="test"] {
	color: blue;
}

<p data-css3="VAL-test-UE">

Matches any p element whose data-css3 attribute value contains the substring "test".

This is a first post in a serie, I'll add the other selectors with working code in the following weeks so stay tuned...

Be the first to write a comment!