Slide 1
Slide 1 text
THE DECLARATIVE
POWER
OF CSS SELECTORS
@mobywhale
Slide 2
Slide 2 text
THE DECLARATIVE
POWER
OF CSS SELECTORS
@mobywhale
Slide 3
Slide 3 text
Question
Slide 4
Slide 4 text
What can CSS do?
Slide 5
Slide 5 text
What can CSS do?
A. Style a webpage
Slide 6
Slide 6 text
What can CSS do?
A. Style a webpage
B. Reduce your HTML
Slide 7
Slide 7 text
What can CSS do?
A. Style a webpage
B. Reduce your HTML
C. Reduce your JavaScript
Slide 8
Slide 8 text
What can CSS do?
A. Style a webpage
B. Reduce your HTML
C. Reduce your JavaScript
D. Testing
Slide 9
Slide 9 text
What can CSS do?
A. Style a webpage
B. Reduce your HTML
C. Reduce your JavaScript
D. Testing
E. All of the above
Slide 10
Slide 10 text
E. All of the above
Slide 11
Slide 11 text
Yeah sure...
A lot of people still think CSS is just used as something to make things look pretty
Slide 12
Slide 12 text
CSS is powerful
CSS is really powerful and there is so much you can do with it.
Slide 13
Slide 13 text
beyond .classes and #id
CSS
• These days it is so much more than just a bunch of classes and ids.
• Lot more you can do with CSS Level 3 and the upcoming Level 4 selectors.
• Show you some real world examples of where CSS selectors can in fact do all the things I mentioned before
Slide 14
Slide 14 text
CSS level 3
Slide 15
Slide 15 text
Attribute selector
Slide 16
Slide 16 text
HTML
- add a class - > apply styles to that class
Slide 17
Slide 17 text
HTML
.search-bar {
...
}
CSS
- add a class - > apply styles to that class
Slide 18
Slide 18 text
[foo=”bar”]
attribute value
- or use attr selector
Slide 19
Slide 19 text
HTML
- instead of using a class, we can use the type attribute to style the selector
Slide 20
Slide 20 text
HTML
input[type="search"] {
...
}
CSS
- instead of using a class, we can use the type attribute to style the selector
Slide 21
Slide 21 text
microdata
[itemprop=”telephone”]
[itemprop=”location”]
- Also use attr selector to target content that has microdata, so in this case
Slide 22
Slide 22 text
Substring matching attribute
• Also do substring matching
• check the value of the specified attribute for a string match
Slide 23
Slide 23 text
Ends with substring
Slide 24
Slide 24 text
[foo$=”bar”]
ends with
Instead of the ^, you use $ instead
Slide 25
Slide 25 text
Download user manual
HTML
• To make it clearer what type of document the user might be downloading
Slide 26
Slide 26 text
.icon {font-family: iconfont;}
.icon-pdf:before {
content: "\e600";
color: crimson;
}
CSS
Download user manual
HTML
• To make it clearer what type of document the user might be downloading
Slide 27
Slide 27 text
Download user manual
HTML
• Can make it even simpler by removing the span
• Use “ends with” substring
• Can determine what icon to display simply based on the href, and you can quite easily show different icons for the different file formats
without having to worry about adding spans with different class names
• Consistently apply the same visual treatment across your site without having to worry
Slide 28
Slide 28 text
a[href$=".pdf"]:after {
font-family: iconfont;
content: "\e600";
color: crimson;
}
CSS
Download user manual
HTML
• Can make it even simpler by removing the span
• Use “ends with” substring
• Can determine what icon to display simply based on the href, and you can quite easily show different icons for the different file formats
without having to worry about adding spans with different class names
• Consistently apply the same visual treatment across your site without having to worry
Slide 29
Slide 29 text
:not()
•opp of what other selectors do
• basically saying.. if an element does not match an argument then apply styles
Slide 30
Slide 30 text
Simple selectors
Slide 31
Slide 31 text
• Class Selector
• ID Selector
• Type Selector
• Universal Selector
• Attribute Selector
• Pseudo Class Selector
Simple selectors
Slide 32
Slide 32 text
h1. Heading 1
This is a paragraph of text. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- List 1
- List 2
- List 3
Slide 33
Slide 33 text
.banner :not(h1) {
color: green;
}
CSS
HTML
- Banner with some text -> want to apply color green to everything but keep the heading 1 using the default black
- ...color green
h1. Heading 1
This is a paragraph of text. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- List 1
- List 2
- List 3
Slide 34
Slide 34 text
Test accessibility
(really?)
Slide 35
Slide 35 text
Slide 36
Slide 36 text
Slide 37
Slide 37 text
Slide 38
Slide 38 text
...
...
HTML
Testing accessibility this way is really handy because you can see at a glance where all the problems are without the
need look through the HTML
Slide 39
Slide 39 text
...
...
HTML
table:not([summary]):after{
content: "Y U NO SUMMARY !(ಠӹಠ!";
font-weight: bold;
color: red;
}
CSS
Testing accessibility this way is really handy because you can see at a glance where all the problems are without the
need look through the HTML
Slide 40
Slide 40 text
...
...
HTML
table:not([summary]):after{
content: "Y U NO SUMMARY !(ಠӹಠ!";
font-weight: bold;
color: red;
}
CSS
Testing accessibility this way is really handy because you can see at a glance where all the problems are without the
need look through the HTML
Slide 41
Slide 41 text
:target
• Most under used and also one of my favourites
• Pseudo selector that allows you to style the element that matches the URL fragment identifier, which is the # in the URL
Slide 42
Slide 42 text
http://mywebsite.com#comment
Slide 43
Slide 43 text
http://mywebsite.com#comment
http://mywebsite.com#comment
Slide 44
Slide 44 text
• where it’s used - wikipedia - number takes you to the footnote it references and highlights the one it references.
• makes it easier to see which part you’re suppose to be looking at
Slide 45
Slide 45 text
7
The targeted paragraph
HTML - p has id that matches href of anchor - apply some style to the p when it’s targetedSlide 46
Slide 46 text
7
The targeted paragraph
HTML p:target { background: yellow; transition: background .25s ease-in-out; } CSS - p has id that matches href of anchor - apply some style to the p when it’s targetedSlide 47
Slide 47 text
- this is what happens
Slide 48
Slide 48 text
:target for simple interaction
- this is why i like it because
Slide 49
Slide 49 text
JS free accordion
Slide 50
Slide 50 text
1
....
HTML
- just showing u the first panel of the accordion to keep things simple
- by default -> content is hidden
Slide 51
Slide 51 text
.acc-content {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: all 1s ease;
}
.acc-content:target {
max-height: 400px;
opacity: 1;
}
CSS
1
....
HTML
- just showing u the first panel of the accordion to keep things simple
- by default -> content is hidden
Slide 52
Slide 52 text
.acc-content {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: all 1s ease;
}
.acc-content:target {
max-height: 400px;
opacity: 1;
}
CSS
1
....
HTML
.acc-content:target {
max-height: 400px;
opacity: 1;
}
- just showing u the first panel of the accordion to keep things simple
- by default -> content is hidden
Slide 53
Slide 53 text
- advantage -> adds the id of the panel to the URL.
- and it doesn’t require JS to do that. so if u need to reference one of the accordion panel elsewhere, you can easily
use the URL with the URI fragment identifier
Slide 54
Slide 54 text
selector
Another good thing about these selectors is that.. you can use them in combination with querySelector and
querySelectorAll.
Slide 55
Slide 55 text
querySelector( )
selector
selector
Another good thing about these selectors is that.. you can use them in combination with querySelector and
querySelectorAll.
Slide 56
Slide 56 text
querySelector( )
selector
selector
querySelectorAll( )
selector
Another good thing about these selectors is that.. you can use them in combination with querySelector and
querySelectorAll.
Slide 57
Slide 57 text
$('input[type="text"]')[0].value();
jQuery
document.querySelector('input[type="text"]').value;
JavaScript
- if u just want to do simple things like selecting a DOM element -> don’t need jquery, and use querySelector, if no
IE7
Slide 58
Slide 58 text
document.querySelectorAll('.list li:not(:first-child):not(:last-child)');
JavaScript
- can have quite complicated selectors
- power of CSS selectors can extend into your JS and help make your it faster and better
Slide 59
Slide 59 text
CSS Level 4
What’s coming in the (probably very far) future
- lastly -> CSS4
- current in working draft
Slide 60
Slide 60 text
!parentSelector
- selector that people wish for the most
Slide 61
Slide 61 text
- ...
- ...
- ...
Slide 62
Slide 62 text
- ...
- ...
- ...
Slide 63
Slide 63 text
- ...
- ...
- ...
Slide 64
Slide 64 text
- ...
- ...
- ...
Slide 65
Slide 65 text
:matches
:matches pseudo class
Slide 66
Slide 66 text
li.active,
li.selected,
li#item-1 {
...
}
CSS
- apply the same style on all the different LI... currently we need to list them all out like so..
- with :matches, things are a little simpler and u don’t need to keep specifing the LI
Slide 67
Slide 67 text
li:matches(.active, .selected, #item-1) {...}
CSS4
li.active,
li.selected,
li#item-1 {
...
}
CSS
- apply the same style on all the different LI... currently we need to list them all out like so..
- with :matches, things are a little simpler and u don’t need to keep specifing the LI
Slide 68
Slide 68 text
a:hover,
a:focus,
a:active {
...
}
CSS
Slide 69
Slide 69 text
a:matches(:hover, :focus, :active) {...}
CSS4
a:hover,
a:focus,
a:active {
...
}
CSS
Slide 70
Slide 70 text
:local-link
- Location pseudo class - local:link
- used to identify internal links and you can pass in a number as a parameter to target the different levels of the URL
Slide 71
Slide 71 text
http://webdirections.org
http://webdirections.org
- if webdirections is the local URL, we can style this link by passing in 0 into the local-link selectpr
- if the URL is one level deep, we can..
- What makes it more useful, is if we combine it with the :not selector
Slide 72
Slide 72 text
a:local-link(0) {color: green;}
CSS4
http://webdirections.org
- if webdirections is the local URL, we can style this link by passing in 0 into the local-link selectpr
- if the URL is one level deep, we can..
- What makes it more useful, is if we combine it with the :not selector
Slide 73
Slide 73 text
http://webdirections.org/code14
http://webdirections.org
- if webdirections is the local URL, we can style this link by passing in 0 into the local-link selectpr
- if the URL is one level deep, we can..
- What makes it more useful, is if we combine it with the :not selector
Slide 74
Slide 74 text
a:local-link(1) {color: yellow;}
CSS4
http://webdirections.org/code14
http://webdirections.org
http://webdirections.org/code14
- if webdirections is the local URL, we can style this link by passing in 0 into the local-link selectpr
- if the URL is one level deep, we can..
- What makes it more useful, is if we combine it with the :not selector
Slide 75
Slide 75 text
local: http://webdirections.org
http://twitter.com
- more handy than adding a class or a span
Slide 76
Slide 76 text
local: http://webdirections.org
http://twitter.com
a:not(:local-link(0)):after {
content: "\e602"; /* Unicode for the icon */
...
}
CSS4
- more handy than adding a class or a span
Slide 77
Slide 77 text
[attr]
:not
:target
!parent
:matches
:local-link
IE7+
IE9+
IE9+
Slide 78
Slide 78 text
(Do not try this at home)
-So I hope this talk has given you some ideas of how you can utilise the power of CSS selectors more to help with
your development
- CSS is really powerful and it can do a lot more than just styling a webpage.
Slide 79
Slide 79 text
Thank you :)