1 / 5

Pseudo Classes and Pseudo Elements

Pseudo Classes and Pseudo Elements. AWAR4S April 2012. Specifying Special Elements in CSS. We have seen how to specify all elements matching certain criteria in our CSS files:

brygid
Download Presentation

Pseudo Classes and Pseudo Elements

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Pseudo Classes andPseudo Elements AWAR4S April 2012

  2. Specifying Special Elements in CSS We have seen how to specify all elements matching certain criteria in our CSS files: • We can simply write in the name of the element, and have the rules apply to all elements of that type, eg: p {color:blue;} • We can tag elements according to a class or an id in our HTML document, and specify these in our rules, eg: p.special {color:red;} Now we wish to use some defaults which CSS recognizes in order to save us some time in our CSS…

  3. Pseudo Classes There are certain handy defaults which CSS recognizes, and which we can use in order to specify styling for elements which often need special styling… • The first-child selector automatically selects the first “child” element of another element which you specify. It can be used to apply styling to the first block element inside of the block element which has been specified. • Eg: p.first-child {color:red;} will turn any paragraph which is the first child of any other element into red text. • For the full reference, consult http://w3schools.com/css/css_pseudo_classes.asp

  4. Pseudo Elements There are also default styling selectors for adding style to the first line or first letter of a block element: • first-line • first-letter See http://w3schools.com/css/css_pseudo_elements.asp for full examples.

  5. Assignment In either a new project, or in a copy of an existing project, apply the following custom CSS rules using pseudo classes and pseudo elements… • Make the first child paragraph in the main content area be bold. The CSS command for bold text is earlier on in the tutorial… • Make the first child paragraph in any sidebars be italicized. Again, this can be found in the CSS tutorial. • [More challenging] Make the first letter in an existing class or id be formatted in the largest font which makes sense. It is ok if it appears to be too large! You may have to write a class or id if one isn’t already in your project. Keep in mind that ONLY ONE LETTER should be selected and styled!

More Related