This document provides information about CSS pseudo-classes. It defines several types of pseudo-classes including dynamic, structural, and others. Dynamic pseudo-classes like :hover and :active select elements when a user interacts with them. Structural pseudo-classes select elements based on their position in a document tree, such as :first-child to select the first child element. The document provides examples of how to use different pseudo-class selectors in CSS code to style elements.
this presentation covers the following topics which are as follows
1. Introduction of css
2. History of css
3. Types of css styling
4. Css syntax
5. Css Selector
6. Css Variations Or Css Versions
this presentation covers the following topics which are as follows
1. Introduction of css
2. History of css
3. Types of css styling
4. Css syntax
5. Css Selector
6. Css Variations Or Css Versions
about this presentation:
1) this presentation was a quickie for non-tech employees, who wanted a basic understanding of html/css, as it related to a white-label SAAS product;
2) the back-end/front-end definitions relate to the specific application (it's inaccurate if node.js is in the picture)
html & css powerpoint slide show for presentation. Here, basic concept of css using with html. a webpage decorated by css.
HTML- Hyper text markup language.
CSS- Cascading Style sheet.
HTML5 Tutorial For Beginners - Learning HTML 5 in simple and easy steps with examples covering 2D Canvas, Audio, Video, New Semantic Elements, Geolocation, Persistent Local Storage, Web Storage, Forms Elements,Application Cache,Inline SVG,Document
This Presentation is based on the different effects of css like "box-shadow, text-shadow". We can also give these effects on the inner side of the text and any image or box.
This presentation is about the types of selectors used in coding/writing HTML or something like that. So this presentation includes element type selector, grouped selector, descendant selector, ID and class selector, universal selector, and pseudoclass selectors. This ppt would provide definition and examples for the topics stated.
Media queries are one of the most exciting aspects about CSS today. They will allow us to change our layouts to suit the exact need of different devices - without changing the content. This presentation explains what Media queries are, how to use them, how to target the iPhone and how to create flexible layouts.
11- Learn CSS Fundamentals / CombinatorsIn a Rocket
Learn CSS fundamentals really fast, online and free.
FULL COURSE: http://inarocket.com
Learn front end development fast, step-by-step and with ready-to-use code.
IN THIS MODULE YOU'LL LEARN:
- Different combinator selectors that can be used in CSS.
- How to use descendant, child and siblings combinators.
READY-TO-USE CODE:
https://inarocket.com/courses/css/css-fundamentals/combinators.php
BEST BOOKS TO LEARN CSS:
- CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT
- HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i
- CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf
- CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh
about this presentation:
1) this presentation was a quickie for non-tech employees, who wanted a basic understanding of html/css, as it related to a white-label SAAS product;
2) the back-end/front-end definitions relate to the specific application (it's inaccurate if node.js is in the picture)
html & css powerpoint slide show for presentation. Here, basic concept of css using with html. a webpage decorated by css.
HTML- Hyper text markup language.
CSS- Cascading Style sheet.
HTML5 Tutorial For Beginners - Learning HTML 5 in simple and easy steps with examples covering 2D Canvas, Audio, Video, New Semantic Elements, Geolocation, Persistent Local Storage, Web Storage, Forms Elements,Application Cache,Inline SVG,Document
This Presentation is based on the different effects of css like "box-shadow, text-shadow". We can also give these effects on the inner side of the text and any image or box.
This presentation is about the types of selectors used in coding/writing HTML or something like that. So this presentation includes element type selector, grouped selector, descendant selector, ID and class selector, universal selector, and pseudoclass selectors. This ppt would provide definition and examples for the topics stated.
Media queries are one of the most exciting aspects about CSS today. They will allow us to change our layouts to suit the exact need of different devices - without changing the content. This presentation explains what Media queries are, how to use them, how to target the iPhone and how to create flexible layouts.
11- Learn CSS Fundamentals / CombinatorsIn a Rocket
Learn CSS fundamentals really fast, online and free.
FULL COURSE: http://inarocket.com
Learn front end development fast, step-by-step and with ready-to-use code.
IN THIS MODULE YOU'LL LEARN:
- Different combinator selectors that can be used in CSS.
- How to use descendant, child and siblings combinators.
READY-TO-USE CODE:
https://inarocket.com/courses/css/css-fundamentals/combinators.php
BEST BOOKS TO LEARN CSS:
- CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT
- HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i
- CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf
- CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh
10- Learn CSS Fundamentals / Pseudo-elementsIn a Rocket
Learn CSS fundamentals really fast, online and free.
FULL COURSE: http://inarocket.com
Learn front end development fast, step-by-step and with ready-to-use code.
IN THIS MODULE YOU'LL LEARN:
- Pseudo-elements as a way to refer to content that does not exist in the source document.
- How to style the first letter or line of a text.
- How to use CSS to generate content before/after an element’s content.
READY-TO-USE CODE:
https://inarocket.com/courses/css/css-fundamentals/pseudo-elements.php
BEST BOOKS TO LEARN CSS:
- CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT
- HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i
- CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf
- CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh
CSS in React - The Good, The Bad, and The UglyJoe Seifi
Overview of 5 frameworks to style JavaScript applications written in React including Radium, Aphrodite, CSS Modules, Styletron, and Styled Components with a Cheat Sheet of their features
14- Learn CSS Fundamentals / InheritanceIn a Rocket
Learn CSS fundamentals really fast, online and free.
FULL COURSE: http://inarocket.com
Learn front end development fast, step-by-step and with ready-to-use code.
IN THIS MODULE YOU'LL LEARN:
- How some properties on a selector are inherited by all the children of that selector.
- List of properties that inherit.
- How to override inherited values and prevent inheritance in CSS.
- How to reset a property to its inherited or initial value.
READY-TO-USE CODE:
https://inarocket.com/courses/css/css-fundamentals/inheritance.php
BEST BOOKS TO LEARN CSS:
- CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT
- HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i
- CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf
- CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}Eric Carlisle
This presentation is a hands-on workshop exploring a medley of client-side web technologies. Flexbox is a CSS layout model that may simplify what usually are very complex layouts. SASS is a CSS wrapper extension / preprocessor allowing CSS to me more maintainable and approachable. Mustache.js is an logicless HTML tool using JavaScript.
Front End Best Practices: A Selection of Best Practices, Tips, Tricks & Good Advice For Today’s Front End Development. Practices mentioned in this presentation range from basic principles to more advanced tools and techniques. By Holger Bartel for WomenWhoCodeHK 23/07/2014
Learn CSS fundamentals really fast, online and free.
FULL COURSE: http://inarocket.com
Learn front end development fast, step-by-step and with ready-to-use code.
IN THIS MODULE YOU'LL LEARN:
- Any HTML element can be a flex container. Child elements of that container are considered flex items.
- A flex container can be displayed as a block (display: flex) or inline (display: inline-flex).
- By default, flex items width and height are defined by their content.
READY-TO-USE CODE:
http://inarocket.com/courses/css/css-flexbox-cssgrid/flexbox-container-items.php
BEST BOOKS TO LEARN FLEXBOX & CSS GRID:
- The New CSS Layout by A Book Apart. https://amzn.to/2ThK0f7
- Flexbox in CSS by O'Reilly Media. https://amzn.to/2Zfekeg
- Grid Layout in CSS: Interface Layout for the Web by O'Reilly Media. https://amzn.to/36fmIMf
- CSS Grid Layout: 5 Practical Projects by SitePoint. https://amzn.to/3bFWYd3
Learn CSS fundamentals really fast, online and free.
FULL COURSE: http://inarocket.com
Learn front end development fast, step-by-step and with ready-to-use code.
IN THIS MODULE YOU'LL LEARN:
- We no longer talk about CSS 3 or 4. CSS has now more than 80 specifications that evolve independently.
- Where to find all CSS specifications.
- How to check maturity of specifications by status code.
- Where to follow CSS current work.
- Where to find Flexbox and CSS Grid specifications.
- How to check Flexbox and CSS Grid browser support.
READY-TO-USE CODE:
http://inarocket.com/courses/css/css-flexbox-cssgrid/context.php
BEST BOOKS TO LEARN FLEXBOX & CSS GRID:
- The New CSS Layout by A Book Apart. https://amzn.to/2ThK0f7
- Flexbox in CSS by O'Reilly Media. https://amzn.to/2Zfekeg
- Grid Layout in CSS: Interface Layout for the Web by O'Reilly Media. https://amzn.to/36fmIMf
- CSS Grid Layout: 5 Practical Projects by SitePoint. https://amzn.to/3bFWYd3
Learn Flexbox & CSS Grid really fast, online and free.
FULL COURSE: http://inarocket.com
Learn front end development fast, step-by-step and with ready-to-use code.
IN THIS MODULE YOU'LL LEARN:
- How to setup an environment to develop CSS with Flexbox and CSS Grid.
- How to install all tools (code editors and browsers) automatically.
READY-TO-USE CODE:
http://inarocket.com/courses/css/css-flexbox-cssgrid/environment-setup.php
BEST BOOKS TO LEARN FLEXBOX & CSS GRID:
- The New CSS Layout by A Book Apart. https://amzn.to/2ThK0f7
- Flexbox in CSS by O'Reilly Media. https://amzn.to/2Zfekeg
- Grid Layout in CSS: Interface Layout for the Web by O'Reilly Media. https://amzn.to/36fmIMf
- CSS Grid Layout: 5 Practical Projects by SitePoint. https://amzn.to/3bFWYd3
Learn CSS fundamentals really fast, online and free.
FULL COURSE: http://inarocket.com
Learn front end development fast, step-by-step and with ready-to-use code.
IN THIS MODULE YOU'LL LEARN:
- CSS values and units.
- Absolute units: pixel, point, pica, millimeter, centimeter and inch.
- Relative units: percentage, em, rem, character, viewport width/height and ex.
- Difference between rem and em unit.
- CSS units best practice.
READY-TO-USE CODE:
https://inarocket.com/courses/css/css-fundamentals/units.php
REFERENCES:
- CSS values and units by W3C. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
- Type Scale: Preview and choose the right type scale for your project. https://type-scale.com/
BEST BOOKS TO LEARN CSS:
- CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT
- HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i
- CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf
- CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh
16- Learn CSS Fundamentals / BackgroundIn a Rocket
Learn CSS fundamentals really fast, online and free.
FULL COURSE: http://inarocket.com
Learn front end development fast, step-by-step and with ready-to-use code.
IN THIS MODULE YOU'LL LEARN:
- How to set a background using CSS.
- How to apply different background options: background-color, background-position, background-image, background-repeat and background-attachment.
- How to create linear and radial gradients.
- Tools: examine background and accessibility information, CSS gradients gallery, etc.
READY-TO-USE CODE:
https://inarocket.com/courses/css/css-fundamentals/background.php
REFERENCES:
- The background CSS property by MDN. https://developer.mozilla.org/en-US/docs/Web/CSS/background
- Chrome Developer Tools: Contrast ratio in the Color Picker. https://developers.google.com/web/updates/2018/01/devtools#contrast
- Enhanced recommended contrast ratio (AAA) by W3C. https://www.w3.org/TR/WCAG21/#contrast-enhanced
- Minimum recommended contrast ratio (AA) by W3C. https://www.w3.org/TR/WCAG21/#contrast-minimum
- Gradient Magic: 28 collections and over 1558 unique CSS gradients. https://www.gradientmagic.com/
- WebGradients: free collection of 180 linear gradients. https://webgradients.com/
BEST BOOKS TO LEARN CSS:
- CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT
- HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i
- CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf
- CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh
Learn CSS fundamentals really fast, online and free.
FULL COURSE: http://inarocket.com
Learn front end development fast, step-by-step and with ready-to-use code.
IN THIS MODULE YOU'LL LEARN:
- How to use the color property to set the foreground color of an element's text content, and its decorations.
- Methods to apply colors in CSS: named colors, HEX, RGB/RGBA and HSL/HSLA.
- Color tools: CSS Peeper, color converter, material design palette, etc.
READY-TO-USE CODE:
https://inarocket.com/courses/css/css-fundamentals/color.php
REFERENCES:
- The color CSS property by MDN. https://developer.mozilla.org/en-US/docs/Web/CSS/color
- Game: What the Hex? http://yizzle.com/whatthehex/
- CSS Peeper: Inspect styles in a simple and well-organized way. https://csspeeper.com/
- RapidTables Color Conversion. https://www.rapidtables.com/convert/color/index.html
- Impalette: Scan images for dominant pantone colors. https://www.impalette.com/
- Material Design Palette. https://www.materialpalette.com/
- Brands in colours: Brands colour reference. https://loriskumo.github.io/Brands-In-Colours/
- BrandColors: Collection of official brand color codes. https://brandcolors.net/
BEST BOOKS TO LEARN CSS:
- CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT
- HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i
- CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf
- CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh
13- Learn CSS Fundamentals / SpecificityIn a Rocket
Learn CSS fundamentals really fast, online and free.
FULL COURSE: http://inarocket.com
Learn front end development fast, step-by-step and with ready-to-use code.
IN THIS MODULE YOU'LL LEARN:
- How specificity works for different kind of selectors.
- How to create selectors avoiding specificity issues and conflicts.
READY-TO-USE CODE:
https://inarocket.com/courses/css/css-fundamentals/specificity.php
BEST BOOKS TO LEARN CSS:
- CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT
- HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i
- CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf
- CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh
12- Learn CSS Fundamentals / Mix & groupIn a Rocket
Learn CSS fundamentals really fast, online and free.
FULL COURSE: http://inarocket.com
Learn front end development fast, step-by-step and with ready-to-use code.
IN THIS MODULE YOU'LL LEARN:
- How to mix selectors (eg. Combine classes and IDs).
- How to group selectors as a best practice to get a much optimized CSS.
READY-TO-USE CODE:
http://localhost/courses/css/css-fundamentals/mix-group.php
BEST BOOKS TO LEARN CSS:
- CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT
- HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i
- CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf
- CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh
8- Learn CSS Fundamentals / Attribute selectorsIn a Rocket
Learn CSS fundamentals really fast, online and free.
FULL COURSE: http://inarocket.com
Learn front end development fast, step-by-step and with ready-to-use code.
IN THIS MODULE YOU'LL LEARN:
- How to use attribute presence and value selectors.
- How to apply substring matching attribute selectors.
READY-TO-USE CODE:
http://inarocket.com/courses/css/css-fundamentals/selectors-attribute.php
BEST BOOKS TO LEARN CSS:
- CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT
- HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i
- CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf
- CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh
2- Learn HTML Fundamentals / Text FormattingIn a Rocket
Learn HTML5 fundamentals really fast, online and free.
FULL COURSE: http://inarocket.com
Learn front end development fast, step-by-step and with ready-to-use code.
IN THIS MODULE YOU'LL LEARN:
- How to structure your content with headers.
- How to organize your ideas with paragraphs.
- How to force spaces and preformat text.
- How to format quotes with blockquote.
- How to tag relevant content with mark.
- How to create ordered, unordered and description lists.
- How to show/hide additional content with details.
- How to document your code with comments.
- How to display reserved and invisible characters with HTML entities.
1- Learn HTML Fundamentals / Start in 5 MinutesIn a Rocket
Learn HTML5 fundamentals really fast, online and free.
FULL COURSE: http://inarocket.com
Learn front end development fast, step-by-step and with ready-to-use code.
IN THIS MODULE YOU'LL LEARN:
- What is HTML.
- Why HTML is a markup language.
- How is its basic structure.
- How to create your first HTML in 5 minutes.
http://inarocket.com
Learn SUIT fundamentals as fast as possible. What is SUIT (Components, descendents, modifiers, states, and utilities), SUIT syntax, how it works with a real example, etc.
http://inarocket.com
Learn BEM fundamentals as fast as possible. What is BEM (Block, element, modifier), BEM syntax, how it works with a real example, etc.
Understanding User Behavior with Google Analytics.pdfSEO Article Boost
Unlocking the full potential of Google Analytics is crucial for understanding and optimizing your website’s performance. This guide dives deep into the essential aspects of Google Analytics, from analyzing traffic sources to understanding user demographics and tracking user engagement.
Traffic Sources Analysis:
Discover where your website traffic originates. By examining the Acquisition section, you can identify whether visitors come from organic search, paid campaigns, direct visits, social media, or referral links. This knowledge helps in refining marketing strategies and optimizing resource allocation.
User Demographics Insights:
Gain a comprehensive view of your audience by exploring demographic data in the Audience section. Understand age, gender, and interests to tailor your marketing strategies effectively. Leverage this information to create personalized content and improve user engagement and conversion rates.
Tracking User Engagement:
Learn how to measure user interaction with your site through key metrics like bounce rate, average session duration, and pages per session. Enhance user experience by analyzing engagement metrics and implementing strategies to keep visitors engaged.
Conversion Rate Optimization:
Understand the importance of conversion rates and how to track them using Google Analytics. Set up Goals, analyze conversion funnels, segment your audience, and employ A/B testing to optimize your website for higher conversions. Utilize ecommerce tracking and multi-channel funnels for a detailed view of your sales performance and marketing channel contributions.
Custom Reports and Dashboards:
Create custom reports and dashboards to visualize and interpret data relevant to your business goals. Use advanced filters, segments, and visualization options to gain deeper insights. Incorporate custom dimensions and metrics for tailored data analysis. Integrate external data sources to enrich your analytics and make well-informed decisions.
This guide is designed to help you harness the power of Google Analytics for making data-driven decisions that enhance website performance and achieve your digital marketing objectives. Whether you are looking to improve SEO, refine your social media strategy, or boost conversion rates, understanding and utilizing Google Analytics is essential for your success.
Italy Agriculture Equipment Market Outlook to 2027harveenkaur52
Agriculture and Animal Care
Ken Research has an expertise in Agriculture and Animal Care sector and offer vast collection of information related to all major aspects such as Agriculture equipment, Crop Protection, Seed, Agriculture Chemical, Fertilizers, Protected Cultivators, Palm Oil, Hybrid Seed, Animal Feed additives and many more.
Our continuous study and findings in agriculture sector provide better insights to companies dealing with related product and services, government and agriculture associations, researchers and students to well understand the present and expected scenario.
Our Animal care category provides solutions on Animal Healthcare and related products and services, including, animal feed additives, vaccination
2.Cellular Networks_The final stage of connectivity is achieved by segmenting...JeyaPerumal1
A cellular network, frequently referred to as a mobile network, is a type of communication system that enables wireless communication between mobile devices. The final stage of connectivity is achieved by segmenting the comprehensive service area into several compact zones, each called a cell.
Meet up Milano 14 _ Axpo Italia_ Migration from Mule3 (On-prem) to.pdfFlorence Consulting
Quattordicesimo Meetup di Milano, tenutosi a Milano il 23 Maggio 2024 dalle ore 17:00 alle ore 18:30 in presenza e da remoto.
Abbiamo parlato di come Axpo Italia S.p.A. ha ridotto il technical debt migrando le proprie APIs da Mule 3.9 a Mule 4.4 passando anche da on-premises a CloudHub 1.0.
1.Wireless Communication System_Wireless communication is a broad term that i...JeyaPerumal1
Wireless communication involves the transmission of information over a distance without the help of wires, cables or any other forms of electrical conductors.
Wireless communication is a broad term that incorporates all procedures and forms of connecting and communicating between two or more devices using a wireless signal through wireless communication technologies and devices.
Features of Wireless Communication
The evolution of wireless technology has brought many advancements with its effective features.
The transmitted distance can be anywhere between a few meters (for example, a television's remote control) and thousands of kilometers (for example, radio communication).
Wireless communication can be used for cellular telephony, wireless access to the internet, wireless home networking, and so on.
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptxBrad Spiegel Macon GA
Brad Spiegel Macon GA’s journey exemplifies the profound impact that one individual can have on their community. Through his unwavering dedication to digital inclusion, he’s not only bridging the gap in Macon but also setting an example for others to follow.
1. IN A ROCKET
Learn front-end development at rocket speed
CSS CSS FUNDAMENTALS
Pseudo-class
2. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES
With this code all a elements that have not yet been visited are shown in green.
A pseudo-class selects an element with a special state specified by a keyword.
a:link {color: green}
Syntax selector:pseudo-class {style properties}
3. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
TARGET &
LANG
UI ELEMENT
STATES
DYNAMIC
NEGATIONSTRUCTURAL
PSEUDO-CLASSES PSEUDO-CLASSES PSEUDO-CLASSES
PSEUDO-CLASSES PSEUDO-CLASSES
4. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
Dynamic
pseudo-classes
:link
:visited
:hover
:active
:focus
5. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / DYNAMIC / LINK STATES
Contact
a:link
Represents links that have
not yet been visited.
Contact
a:visited
Styles for links that have been visited
(exists in the browser's history).
Contact
a:active
Triggered when the user clicks the link or
selects it with the keyboard's tab key.
CLICKED
Contact
a:hover
Generally triggered when the user hovers over
an element with the cursor (mouse pointer).
6. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
Dynamic
pseudo-classes
:link
:visited
:hover
:active
:focus
How to remember them?
😍 LOVE
😤 HATE
7. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / DYNAMIC
With this code all not visited links are shown in green.
Selects all links that have not yet been visited.
a:link {color: green}
Syntax selector:link {style properties}
8. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
PSEUDO-CLASSES / DYNAMIC
<body>
<a href="#">Not visited.</a>
<a href="#">Visited.</a>
<a href="#">Hover.</a>
<a href="#">Active.</a>
<input type="text" name="zip" id="zip">
</body>
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: green; }
a:active { color: red; }
input:focus { color: orange; }
Web page title
index.html
Not visited.
Pressed
Visited. Hover. Active. Writing here...
READY TO USE CODE
9. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
TARGET &
LANG
UI ELEMENT
STATES
DYNAMIC
NEGATIONSTRUCTURAL
PSEUDO-CLASSES PSEUDO-CLASSES PSEUDO-CLASSES
PSEUDO-CLASSES PSEUDO-CLASSES
10. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / TARGET & LANG
With this code the terms fragment identifier is shown in green.
Selects a fragment identifier that has a location within a resource.
h2:terms {color: green}
Syntax selector:target {style properties}
11. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
PSEUDO-CLASSES / TARGET & LANG
<body>
<a href="#about">About.</a>
<a href="#terms">Terms.</a>
<h2 id="about">About our company</h2>
<h2 id="terms">Terms of use</h2>
</body>
h2:target { color: green; }
Web page title
index.html
- About.
- Terms.
About our company
Terms of use
READY TO USE CODE
12. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / TARGET & LANG
With this code the paragraphs in English (en) are shown in green.
Selects elements based on the language they are determined to be in.
p:lang(en) {color: green}
Syntax selector:lang(lg) {style properties}
13. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
PSEUDO-CLASSES / TARGET & LANG
<body>
<p lang="en"><q>To be, or not to be:
that is the question.</q></p>
<p lang="es"><q>En un lugar de la
Mancha, de cuyo nombre no quiero
acordarme...</q></p>
</body>
p:lang(en) > q { quotes: '201C' '201D'; }
p:lang(es) > q { quotes: '«' '»'; }
Web page title
index.html
“To be, or not to be: that is the question.”
«En un lugar de la Mancha, de cuyo nombre no quiero
acordarme...»
READY TO USE CODE
14. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
TARGET &
LANG
UI ELEMENT
STATES
DYNAMIC
NEGATIONSTRUCTURAL
PSEUDO-CLASSES PSEUDO-CLASSES PSEUDO-CLASSES
PSEUDO-CLASSES PSEUDO-CLASSES
15. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / UI ELEMENT STATES
With this code only the enabled inputs are shown in green.
Selects any enabled element (it can be selected, clicked on, typed into, etc.).
input:enabled {color: green}
Syntax selector:enabled {style properties}
16. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / UI ELEMENT STATES
With this code only the disabled inputs are shown in green.
Selects any disabled element.
input:disabled {color: green}
Syntax selector:enabled {style properties}
17. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
PSEUDO-CLASSES / UI ELEMENT STATES
<body>
<form>
<label for="name">Name:</label>
<input type="text" id="name">
<label for="city">City:</label>
<input type="text" id="city" value="NYC"
disabled="disabled">
<input type="button" value="Submit">
</form>
</body>
input:enabled { color: green; }
input:disabled { color: gray; }
Web page title
index.html
Name:
City:
John Doe
NYC
READY TO USE CODE
18. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / UI ELEMENT STATES
With this code only the checked inputs are shown in green.
Selects any radio, checkbox or option that is checked or toggled to an on state.
input:checked {color: green}
Syntax selector:checked {style properties}
19. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
PSEUDO-CLASSES / UI ELEMENT STATES
<body>
<form>
<input type="radio" name="pay" id="cash">
<label for="cash">Cash</label>
<input type="radio" name="pay" id="card">
<label for="card">Card</label>
<input type="checkbox" name="nwslt" id="nwslt">
<label for="nwslt">Subscribe me!</label>
</form>
</body>
input[type=radio]:checked + label { color:
green; }
input[type=checkbox]:checked + label { color:
blue; }
Web page title
index.html
Cash Card Subscribe me!
READY TO USE CODE
20. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
TARGET &
LANG
UI ELEMENT
STATES
DYNAMIC
NEGATIONSTRUCTURAL
PSEUDO-CLASSES PSEUDO-CLASSES PSEUDO-CLASSES
PSEUDO-CLASSES PSEUDO-CLASSES
21. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
Structural
pseudo-classes
:root
:empty
:first-child
:last-child
:nth-child()
:only-child
:first-of-type
:last-of-type
:nth-of-type()
:only-of-type
22. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / STRUCTURAL
Selects an element that is the root of the document (in HTML, this is always the HTML element).
:root {color: green}
Syntax :root {style properties}
23. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
PSEUDO-CLASSES / STRUCTURAL
<body>
<h2>Lorem ipsum dolor</h2>
<p>Nostrum similique veniam commodi sed esse earum
voluptatum corrupti at quam voluptates?</p>
<ul>
<li>Esse</li>
<li>Earum</li>
</ul>
</body>
:root { color: green; }
Web page title
index.html
Lorem ipsum dolor
Nostrum similique veniam commodi sed esse earum voluptatum
corrupti at quam voluptates?
• Esse
• Earum
READY TO USE CODE
24. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
PSEUDO-CLASSES / STRUCTURAL
<body>
<h2>Lorem ipsum dolor</h2>
<p>Nostrum similique veniam commodi sed esse
earum voluptatum corrupti at quam voluptates?
</p>
</body>
:root {
--color-primary: blue;
--color-secondary: gray;
}
p {
background: var(--color-secondary);
color: var(--color-primary);
}
Web page title
index.html
Lorem ipsum dolor
Nostrum similique veniam commodi sed esse earum voluptatum
corrupti at quam voluptates?
READY TO USE CODE
25. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
Structural
pseudo-classes
:root
:empty
:first-child
:last-child
:nth-child()
:only-child
:first-of-type
:last-of-type
:nth-of-type()
:only-of-type
26. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / STRUCTURAL
With this code only the empty divs are shown in gray.
Selects an element that has no children at all.
div:empty {background: gray}
Syntax element:empty {style properties}
27. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
PSEUDO-CLASSES / STRUCTURAL
<body>
<article>
<h2>Item 1</h2>
<p>Item description.</p>
</article>
<article><!-- No item here --></article>
</body>
article {
background: green;
width: 100px;
height: 100px;
}
article:empty {
background: gray;
}
Web page title
index.html
Item 1
Item description.
READY TO USE CODE
28. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
Structural
pseudo-classes
:root
:empty
:first-child
:last-child
:nth-child()
:only-child
:first-of-type
:last-of-type
:nth-of-type()
:only-of-type
29. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / STRUCTURAL
With this code only the first li of a list is shown in green.
Selects an element that is first in a list of siblings.
li:first-child {color: green}
Syntax element:first-child {style properties}
30. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
PSEUDO-CLASSES / STRUCTURAL
<body>
<ol>
<li>Usain Bolt - Gold</li>
<li>Yohan Blake - Silver</li>
<li>Justin Gatlin - Bronze</li>
</ol>
</body>
li:first-child { color: green; }
Web page title
index.html
1. Usain Bolt - Gold
2. Yohan Blake - Silver
3. Justin Gatlin - Bronze
READY TO USE CODE
31. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
Structural
pseudo-classes
:root
:empty
:first-child
:last-child
:nth-child()
:only-child
:first-of-type
:last-of-type
:nth-of-type()
:only-of-type
32. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / STRUCTURAL
With this code only the last li of a list is shown in green.
Selects an element that is last in a list of siblings.
li:last-child {color: green}
Syntax element:last-child {style properties}
33. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
PSEUDO-CLASSES / STRUCTURAL
<body>
<ol>
<li>Usain Bolt - Gold</li>
<li>Yohan Blake - Silver</li>
<li>Justin Gatlin - Bronze</li>
<li>Miguel Sánchez - Retired ;)</li>
</ol>
</body>
li:last-child { color: green; }
Web page title
index.html
1. Usain Bolt - Gold
2. Yohan Blake - Silver
3. Justin Gatlin - Bronze
4. Miguel Sánchez - Retired ;)
READY TO USE CODE
34. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
Structural
pseudo-classes
:root
:empty
:first-child
:last-child
:nth-child()
:only-child
:first-of-type
:last-of-type
:nth-of-type()
:only-of-type
35. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / STRUCTURAL
With this code every odd li of a list is shown in green.
Selects an element that has an+b-1 siblings before it in the document tree and has a parent element.
li:nth-child(2n+1) {color: green}
Syntax element:nth-child(an + b) {style properties}
41. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / STRUCTURAL
li:nth-child(1n+3) { color: green; }
• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
First term
Difference
42. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / STRUCTURAL
li:nth-child(3n+3) { color: green; }
• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
First term
Difference
43. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
Structural
pseudo-classes
:root
:empty
:first-child
:last-child
:nth-child()
:only-child
:first-of-type
:last-of-type
:nth-of-type()
:only-of-type
44. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / STRUCTURAL
With this code only an li without siblings is shown in green.
Selects an element that has no siblings.
li:only-child {color: green}
Syntax element:only-child {style properties}
45. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
PSEUDO-CLASSES / STRUCTURAL
<body>
<h2>Search results: devices</h2>
<ul>
<li>Laptops</li>
<li>Smartphones</li>
</ul>
<h2>Search results: accessories</h2>
<ul>
<li>No results found</li>
</ul>
</body>
li:only-child { color: green; }
Web page title
index.html
Search results: devices
• Laptops
• Smartphones
Search results: accessories
• No results found
READY TO USE CODE
46. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
Structural
pseudo-classes
:root
:empty
:first-child
:last-child
:nth-child()
:only-child
:first-of-type
:last-of-type
:nth-of-type()
:only-of-type
47. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / STRUCTURAL
With this code only the first p in a group of children paragraphs is shown in green.
Selects an element that is the first sibling of its type.
p:first-of-type {color: green}
Syntax element:first-of-type {style properties}
48. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
PSEUDO-CLASSES / STRUCTURAL
<body>
<main>
<h2>Featured product</h2>
<p>Product description.</p>
<h2>Second product</h2>
<p>Product description.</p>
</main>
</body>
p:first-of-type { color: green; }
Web page title
index.html
Featured product
Product description.
Second product
Product description.
READY TO USE CODE
49. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
Structural
pseudo-classes
:root
:empty
:first-child
:last-child
:nth-child()
:only-child
:first-of-type
:last-of-type
:nth-of-type()
:only-of-type
50. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / STRUCTURAL
With this code only the last p in a group of children paragraphs is shown in green.
Selects an element that is the last sibling of its type.
p:last-of-type {color: green}
Syntax element:first-of-type {style properties}
51. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
PSEUDO-CLASSES / STRUCTURAL
<body>
<main>
<h2>First product</h2>
<p>Product description.</p>
<h2>Expiring product</h2>
<p>Last units available.</p>
</main>
</body>
p:last-of-type { color: green; }
Web page title
index.html
First product
Product description.
Expiring product
Last units available.
READY TO USE CODE
52. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
Structural
pseudo-classes
:root
:empty
:first-child
:last-child
:nth-child()
:only-child
:first-of-type
:last-of-type
:nth-of-type()
:only-of-type
53. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / STRUCTURAL
With this code only the odd paragraphs in a group of children paragraphs are shown in green.
Selects elements of a given type, based on their position among a group of siblings.
p:nth-of-type(odd) {color: green}
Syntax element:nth-of-type() {style properties}
54. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
PSEUDO-CLASSES / STRUCTURAL
<body>
<main>
<h2>Product 1</h2>
<p>Product description.</p>
<h2>Product 2</h2>
<p>Product description.</p>
<h2>Product 3</h2>
<p>Product description.</p>
<h2>Product 4</h2>
<p>Product description.</p>
</main>
</body>
p:nth-of-type(odd) { color: green; }
Web page title
index.html
Product 1
Product description.
Product 2
Product description.
Product 3
Product description.
Product 4
Product description.
READY TO USE CODE
55. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
Structural
pseudo-classes
:root
:empty
:first-child
:last-child
:nth-child()
:only-child
:first-of-type
:last-of-type
:nth-of-type()
:only-of-type
56. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / STRUCTURAL
With this code only the paragraph with no other siblign paragraphs is shown in green.
Selects an element that has no siblings with the same expanded element name.
p:only-of-type {color: green}
Syntax element:only-of-type() {style properties}
57. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
PSEUDO-CLASSES / STRUCTURAL
<body>
<article>
<h2>Product 1</h2>
<p>Product description.</p>
<p>Description continues here.</p>
</article>
<article>
<h2>Product 2</h2>
<p>Out of stock.</p>
</article>
</body>
p:only-of-type { color: green; }
Web page title
index.html
Product 1
Product description.
Description continues here.
Product 2
Out of stock.
READY TO USE CODE
58. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
TARGET &
LANG
UI ELEMENT
STATES
DYNAMIC
NEGATIONSTRUCTURAL
PSEUDO-CLASSES PSEUDO-CLASSES PSEUDO-CLASSES
PSEUDO-CLASSES PSEUDO-CLASSES
59. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
PSEUDO-CLASSES / NEGATION
With this code all the elements of a header are shown in green, excluding all h1 headers.
Selects elements that do not match a list of selectors.
header :not(h1) {color: green}
Syntax element:not(X) {style properties}
60. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
PSEUDO-CLASSES / NEGATION
<body>
<header>
<h1>Company name</h1>
<h1>Tagline</h1>
<nav>Navigation goes here.</nav>
<div>User not logged in.</div>
</header>
</body>
header :not(h1) { color: green; }
Web page title
index.html
Company name
Tagline
Product description.
User not logged in.
READY TO USE CODE
61. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
PSEUDO-CLASSES / NEGATION
<body>
<p class="mini">Paragraph goes here.</p>
<p>Paragraph goes here.</p>
<p class="mini">Paragraph goes here.</p>
</body>
.mini { color: black; }
p:not(.mini) { color: green; }
Web page title
index.html
Paragraph goes here.
Paragraph goes here.
Paragraph goes here.
READY TO USE CODE
62. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
TARGET &
LANG
UI ELEMENT
STATES
DYNAMIC
NEGATIONSTRUCTURAL
PSEUDO-CLASSES PSEUDO-CLASSES PSEUDO-CLASSES
PSEUDO-CLASSES PSEUDO-CLASSES
63. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
REFERENCE: W3C
SOURCE: Selectors Level 3 by W3C.
64. Learn front-end development at rocket speed
inarocket.com
by miguelsanchez.com
YOU CAN CONTINUE THIS COURSE FOR FREE ON
+ READY TO USE CODE
+ QUIZZES
+ FREE UPDATES
65. We respect your time
No more blah blah videos. Just straight to
the point slides with relevant information.
Ready to use code
Real code you can just copy and paste into
your real projects.
Step by step guides
Clear and concise steps to build real use
solutions. No missed points.
Learn front-end development at rocket speed
inarocket.com
66. IN A ROCKET
Learn front-end development at rocket speed
CSS CSS FUNDAMENTALS
Pseudo-class