CSS: Selectors and Best Practices

Transcription

1 CSS: Selectors and Best Practices CISC 282 October 2, 2018 Type Selectors Use HTML tag names p { h1, h2 { color: blue; Applied to element(s) with those tags 2

2 Class Selectors Use a name preceded by a period.warningtext { color: yellow; Applied to elements whose class attribute includes that name The same name can be used for any number of elements An element can have any number of names in its class <p class="warningtext"> <h1 class="warningtext pagetitle"> 3 ID Selectors Use a name preceded by a hashtag #links { color: blue; Applied to the element whose id attribute is assigned that name The name is only used for one element An element can only have one name for its id <a id="links" href="..."> 4

3 Type, Class or ID? Type selector Use to style a given tag everywhere ID selector The id attribute is set to a single unique value Use to style a single element Class selector The class attribute is assigned at least one non-unique value Use to style many different elements with something in common Contextual Selectors 5 Two or more selectors separated by whitespace Represents a series of nested elements Outer Inner p em { color: purple; Also known as descendant selectors Applied to all elements in the given context Order is essential! Rule applied <p> <em>important</em> </p> <blockquote> <em>important</em> </blockquote> 6

4 Other Selectors Universal selector Applied to all elements in the document * { color: gray; Child selector Applied to inner elements nested immediately within outer element.listhightlight > li { color: fuchsia; And more! Combining Selectors 7 You can combine type, class and/or ID selectors together to specify a particular element p#problemsummary.errortext.highcontrast { <p id="problemsummary" class="errortext highcontrast extraspace"> Rule not applied; incorrect tag <h1 id="problemsummary" class="errortext highcontrast"> Rule applied 8

5 Pseudo Selectors CSS selectors are typically document-related Reflect an element's context in the page Containing elements, tag, class(es)... What about selectors for other characteristics? e.g., the first letter of some text Can use pseudo-classes and pseudo-elements Pseudo characteristic is preceded by a colon in the selector p:pseudo {... :pseudo {... Pseudo Selectors 9 Some pseudo-elements :first-letter and :first-line Applied to first letter/line of text in a block Some pseudo-classes :link and :visited Applied to anchors that have (not) been visited :hover Applied to elements the cursor is hovering over 10

6 Best Practices Name classes semantically What the style is intended for not what it does Define and apply styles efficiently Choose selectors wisely Tags to change in general Classes to change occasionally Context for specific situations Avoid duplicating rules for different elements Structure rules to apply to elements which share style settings Examples to Avoid 11 Consider creating a "highlighter" effect:.yellowbackground { background-color: yellow; What if you want to change the colour to green? The name no longer makes sense Choose something semantic instead.highlighter { background-color: yellow; 12

7 Examples to Avoid Consider changing the colour for some list items:.issue { Every list item must specify the class Imagine a list with dozens of entries Using a contextual selector is more efficient.issues li { <ul> <li class="issue">...</li> <li class="issue">...</li> </ul> <ul class="issues"> <li>...</li> <li>...</li> </ul> 13