The document discusses different types of CSS selectors that can be used to select and style elements in an HTML document. It covers element selectors, class selectors, ID selectors, attribute selectors, and pseudo-class selectors. Examples are provided for each type of selector to demonstrate how they can be used to select elements and apply CSS styles. Combinators are also discussed, which allow selecting elements based on a specific relationship between them. In summary, the document provides an overview of CSS selector syntax and examples of how different selector types can be used to target elements in an HTML document for styling purposes.
All you need to know about CSS:
Selectors
Value Processing
Cascading
Box Model
Visual Formatting Model
Block Formatting Context
Stacking Context
At-Rules
Units
Presentation with examples:
http://rawgit.com/vzhidal/HTML-CSS-Training-Presentations/master/css-basics.html
Anchor object
Document object
Event object
Form and Form Input object
Frame, Frameset, and IFrame objects
Image object etc
Dom hiearchy,managing events
onload and onunload
Using the Onclick Event Handler
All you need to know about CSS:
Selectors
Value Processing
Cascading
Box Model
Visual Formatting Model
Block Formatting Context
Stacking Context
At-Rules
Units
Presentation with examples:
http://rawgit.com/vzhidal/HTML-CSS-Training-Presentations/master/css-basics.html
Anchor object
Document object
Event object
Form and Form Input object
Frame, Frameset, and IFrame objects
Image object etc
Dom hiearchy,managing events
onload and onunload
Using the Onclick Event Handler
The road to <> styled-components: CSS in component-based systems by Max S...React London 2017
There's been a revolution; welcome the Component Age! Now what about styles? Max sat down with Glen Maddern (CSS modules) to think about how styles fit into our post-revolution world. They took the best of CSS and the web to create a fantastic new way to style component-based systems.
This slide is designed to give some basic idea & working knowledge of CSS to web developers who already have some working experience & want to enlarge their CSS knowledge.
9- Learn CSS Fundamentals / Pseudo-classesIn 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 a pseudo-class selects an element with a special state specified by a keyword.
- Pseudo-classes: dynamic, target & language, UI element styles, structural and negation.
- How to style links in CSS.
- Style content based on the language.
- How to style enabled, disabled and checked elements.
- Style elements depending on their position in the DOM.
- How to style elements that do not match a list of selectors.
READY-TO-USE CODE:
https://inarocket.com/courses/css/css-fundamentals/pseudo-classes.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
Zend_Form simplifies form creation and handling in
your web application. It accomplishes the following
goals:
- Input filtering
- Input validation
- Element ordering
- Element and Form rendering
- Element and Form grouping
- Element and Form-level configuration
Get The Knowledge and Advance of HTML
Block-level Elements:
A block-level element always starts on a new line.
A block-level element always takes up the full width available.
A block level element has a top and a bottom margin, whereas an inline element does not.
The <div> element is a block-level element.
Il est important de souligner que la base de données ne se résume pas simplement à une requête à optimiser, mais également à une structure de données qu'il convient de choisir et de configurer avec soin.
Elixir in a nutshell - Training sessions
1/ Ecosystem
2/ Fundamental concepts
3/ Rest API
In this first session we will discover :
- iex, mix & hex
- code quality tools
- typespecs & documentations
- unit test & coverage
Github source code :
https://github.com/helabenkhalfallah/elixir_in_nutshell
Article :
https://medium.com/@helabenkhalfallah/elixir-in-a-nutshell-6655f1851520
Elixir references :
https://elixirschool.com/en/
https://elixir-lang.org/getting-started/introduction.html
https://hexdocs.pm/
Elixir communities :
https://github.com/elixir-lang/elixir/wiki#online-communities
La gestion de l’entreprise, des projets, de l’équipe et de la qualité en boucle fermée :
1/ Cultiver les sondes adéquates et nécessaires.
2/ Lancer.
3/ Observer et mesurer.
4/ Critiquer, améliorer et corriger.
Note : un projet de type software.
Enhancing Project Management Efficiency_ Leveraging AI Tools like ChatGPT.pdfJay Das
With the advent of artificial intelligence or AI tools, project management processes are undergoing a transformative shift. By using tools like ChatGPT, and Bard organizations can empower their leaders and managers to plan, execute, and monitor projects more effectively.
May Marketo Masterclass, London MUG May 22 2024.pdfAdele Miller
Can't make Adobe Summit in Vegas? No sweat because the EMEA Marketo Engage Champions are coming to London to share their Summit sessions, insights and more!
This is a MUG with a twist you don't want to miss.
Top Features to Include in Your Winzo Clone App for Business Growth (4).pptxrickgrimesss22
Discover the essential features to incorporate in your Winzo clone app to boost business growth, enhance user engagement, and drive revenue. Learn how to create a compelling gaming experience that stands out in the competitive market.
SOCRadar Research Team: Latest Activities of IntelBrokerSOCRadar
The European Union Agency for Law Enforcement Cooperation (Europol) has suffered an alleged data breach after a notorious threat actor claimed to have exfiltrated data from its systems. Infamous data leaker IntelBroker posted on the even more infamous BreachForums hacking forum, saying that Europol suffered a data breach this month.
The alleged breach affected Europol agencies CCSE, EC3, Europol Platform for Experts, Law Enforcement Forum, and SIRIUS. Infiltration of these entities can disrupt ongoing investigations and compromise sensitive intelligence shared among international law enforcement agencies.
However, this is neither the first nor the last activity of IntekBroker. We have compiled for you what happened in the last few days. To track such hacker activities on dark web sources like hacker forums, private Telegram channels, and other hidden platforms where cyber threats often originate, you can check SOCRadar’s Dark Web News.
Stay Informed on Threat Actors’ Activity on the Dark Web with SOCRadar!
Experience our free, in-depth three-part Tendenci Platform Corporate Membership Management workshop series! In Session 1 on May 14th, 2024, we began with an Introduction and Setup, mastering the configuration of your Corporate Membership Module settings to establish membership types, applications, and more. Then, on May 16th, 2024, in Session 2, we focused on binding individual members to a Corporate Membership and Corporate Reps, teaching you how to add individual members and assign Corporate Representatives to manage dues, renewals, and associated members. Finally, on May 28th, 2024, in Session 3, we covered questions and concerns, addressing any queries or issues you may have.
For more Tendenci AMS events, check out www.tendenci.com/events
AI Pilot Review: The World’s First Virtual Assistant Marketing SuiteGoogle
AI Pilot Review: The World’s First Virtual Assistant Marketing Suite
👉👉 Click Here To Get More Info 👇👇
https://sumonreview.com/ai-pilot-review/
AI Pilot Review: Key Features
✅Deploy AI expert bots in Any Niche With Just A Click
✅With one keyword, generate complete funnels, websites, landing pages, and more.
✅More than 85 AI features are included in the AI pilot.
✅No setup or configuration; use your voice (like Siri) to do whatever you want.
✅You Can Use AI Pilot To Create your version of AI Pilot And Charge People For It…
✅ZERO Manual Work With AI Pilot. Never write, Design, Or Code Again.
✅ZERO Limits On Features Or Usages
✅Use Our AI-powered Traffic To Get Hundreds Of Customers
✅No Complicated Setup: Get Up And Running In 2 Minutes
✅99.99% Up-Time Guaranteed
✅30 Days Money-Back Guarantee
✅ZERO Upfront Cost
See My Other Reviews Article:
(1) TubeTrivia AI Review: https://sumonreview.com/tubetrivia-ai-review
(2) SocioWave Review: https://sumonreview.com/sociowave-review
(3) AI Partner & Profit Review: https://sumonreview.com/ai-partner-profit-review
(4) AI Ebook Suite Review: https://sumonreview.com/ai-ebook-suite-review
OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoamtakuyayamamoto1800
In this slide, we show the simulation example and the way to compile this solver.
In this solver, the Helmholtz equation can be solved by helmholtzFoam. Also, the Helmholtz equation with uniformly dispersed bubbles can be simulated by helmholtzBubbleFoam.
Field Employee Tracking System| MiTrack App| Best Employee Tracking Solution|...informapgpstrackings
Keep tabs on your field staff effortlessly with Informap Technology Centre LLC. Real-time tracking, task assignment, and smart features for efficient management. Request a live demo today!
For more details, visit us : https://informapuae.com/field-staff-tracking/
Code reviews are vital for ensuring good code quality. They serve as one of our last lines of defense against bugs and subpar code reaching production.
Yet, they often turn into annoying tasks riddled with frustration, hostility, unclear feedback and lack of standards. How can we improve this crucial process?
In this session we will cover:
- The Art of Effective Code Reviews
- Streamlining the Review Process
- Elevating Reviews with Automated Tools
By the end of this presentation, you'll have the knowledge on how to organize and improve your code review proces
Globus Connect Server Deep Dive - GlobusWorld 2024Globus
We explore the Globus Connect Server (GCS) architecture and experiment with advanced configuration options and use cases. This content is targeted at system administrators who are familiar with GCS and currently operate—or are planning to operate—broader deployments at their institution.
Innovating Inference - Remote Triggering of Large Language Models on HPC Clus...Globus
Large Language Models (LLMs) are currently the center of attention in the tech world, particularly for their potential to advance research. In this presentation, we'll explore a straightforward and effective method for quickly initiating inference runs on supercomputers using the vLLM tool with Globus Compute, specifically on the Polaris system at ALCF. We'll begin by briefly discussing the popularity and applications of LLMs in various fields. Following this, we will introduce the vLLM tool, and explain how it integrates with Globus Compute to efficiently manage LLM operations on Polaris. Attendees will learn the practical aspects of setting up and remotely triggering LLMs from local machines, focusing on ease of use and efficiency. This talk is ideal for researchers and practitioners looking to leverage the power of LLMs in their work, offering a clear guide to harnessing supercomputing resources for quick and effective LLM inference.
Exploring Innovations in Data Repository Solutions - Insights from the U.S. G...Globus
The U.S. Geological Survey (USGS) has made substantial investments in meeting evolving scientific, technical, and policy driven demands on storing, managing, and delivering data. As these demands continue to grow in complexity and scale, the USGS must continue to explore innovative solutions to improve its management, curation, sharing, delivering, and preservation approaches for large-scale research data. Supporting these needs, the USGS has partnered with the University of Chicago-Globus to research and develop advanced repository components and workflows leveraging its current investment in Globus. The primary outcome of this partnership includes the development of a prototype enterprise repository, driven by USGS Data Release requirements, through exploration and implementation of the entire suite of the Globus platform offerings, including Globus Flow, Globus Auth, Globus Transfer, and Globus Search. This presentation will provide insights into this research partnership, introduce the unique requirements and challenges being addressed and provide relevant project progress.
Globus Compute wth IRI Workflows - GlobusWorld 2024Globus
As part of the DOE Integrated Research Infrastructure (IRI) program, NERSC at Lawrence Berkeley National Lab and ALCF at Argonne National Lab are working closely with General Atomics on accelerating the computing requirements of the DIII-D experiment. As part of the work the team is investigating ways to speedup the time to solution for many different parts of the DIII-D workflow including how they run jobs on HPC systems. One of these routes is looking at Globus Compute as a way to replace the current method for managing tasks and we describe a brief proof of concept showing how Globus Compute could help to schedule jobs and be a tool to connect compute at different facilities.
We describe the deployment and use of Globus Compute for remote computation. This content is aimed at researchers who wish to compute on remote resources using a unified programming interface, as well as system administrators who will deploy and operate Globus Compute services on their research computing infrastructure.
In software engineering, the right architecture is essential for robust, scalable platforms. Wix has undergone a pivotal shift from event sourcing to a CRUD-based model for its microservices. This talk will chart the course of this pivotal journey.
Event sourcing, which records state changes as immutable events, provided robust auditing and "time travel" debugging for Wix Stores' microservices. Despite its benefits, the complexity it introduced in state management slowed development. Wix responded by adopting a simpler, unified CRUD model. This talk will explore the challenges of event sourcing and the advantages of Wix's new "CRUD on steroids" approach, which streamlines API integration and domain event management while preserving data integrity and system resilience.
Participants will gain valuable insights into Wix's strategies for ensuring atomicity in database updates and event production, as well as caching, materialization, and performance optimization techniques within a distributed system.
Join us to discover how Wix has mastered the art of balancing simplicity and extensibility, and learn how the re-adoption of the modest CRUD has turbocharged their development velocity, resilience, and scalability in a high-growth environment.
How to Position Your Globus Data Portal for Success Ten Good PracticesGlobus
Science gateways allow science and engineering communities to access shared data, software, computing services, and instruments. Science gateways have gained a lot of traction in the last twenty years, as evidenced by projects such as the Science Gateways Community Institute (SGCI) and the Center of Excellence on Science Gateways (SGX3) in the US, The Australian Research Data Commons (ARDC) and its platforms in Australia, and the projects around Virtual Research Environments in Europe. A few mature frameworks have evolved with their different strengths and foci and have been taken up by a larger community such as the Globus Data Portal, Hubzero, Tapis, and Galaxy. However, even when gateways are built on successful frameworks, they continue to face the challenges of ongoing maintenance costs and how to meet the ever-expanding needs of the community they serve with enhanced features. It is not uncommon that gateways with compelling use cases are nonetheless unable to get past the prototype phase and become a full production service, or if they do, they don't survive more than a couple of years. While there is no guaranteed pathway to success, it seems likely that for any gateway there is a need for a strong community and/or solid funding streams to create and sustain its success. With over twenty years of examples to draw from, this presentation goes into detail for ten factors common to successful and enduring gateways that effectively serve as best practices for any new or developing gateway.
2. CSSRULESTRUCTURE
selector color : red ; background : yellow ; }
{
HTML TAG, CLASS NAME, UNIVERSAL SELECTOR (*)
PROPERTY
VALUE
DECLARATION
DECLARATION BLOCK
PROPERTY
VALUE
DECLARATION
4. ELEMENTSELECTORS
element { property: value; property: value; }
Any (valid) html tag
h2 { color: silver; } Make the text of all h2 elements in the html
document appear in silver.
h1 { color: gray; }
h2 { color: gray; }
h3 { color: gray; }
h4 { color: gray; }
h5 { color: gray; }
h6 { color: gray; }
h1, h2, h3, h4, h5, h6 {
color: gray;
}
GROUPING SELECTORS
h1 { font: 18px Helvetica; }
h1 { color: purple; }
h1 { background: aqua; }
h1 {
font: 18px Helvetica;
color: purple;
background: aqua;
}
GROUPING DECLARATIONS
5. CLASSSELECTORS
.class-name { property: value; property: value; }
<p class="legal-notice--description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<span>
Contrary to popular belief, Lorem Ipsum is not simply random text
</span>
<p class="legal-notice--description">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>
.legal-notice--description{
font: 18px Helvetica;
color: purple;
background: aqua;
}
HTML :
CSS :
The css styling will only be applied to the element that has a
class attribute with a value of 'legal-notice--description'.
CASE SENSITIVE SELECTOR
6. COMBININGELEMENTANDCLASSSELECTORS
element.class-name { property: value; property: value; }
p.legal-notice--description{
font-weight: bold;
}
Rule applies only to a speci
fi
c type of element/class combination, it does
not leak over to other elements.
<p class="legal-notice--description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<span class="legal-notice--description">
Contrary to popular belief, Lorem Ipsum is not simply random text
</span>
<p class="legal-notice--description">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>
The selector will match this element (p having a class with the
value ‘legal-notice—description’).
The selector will match this element (p having a class with the
value ‘legal-notice—description’).
The selector will not match this element (span).
CASE SENSITIVE SELECTOR
7. MULTIPLECLASSESSELECTORS
.class-name-1.class-name-2….. { property: value; property: value; }
.alert {
font-size: 18px;
}
.error{
background-color: red;
}
.message--body{
font-size: 25px;
}
.alert.error{
font-weight: bold;
}
.alert.error.message--body{
background: white;
}
p.alert.error{
font-weight: lighter;
}
<span class="alert error">
This will match the .alert.error selector
</span>
<span class="error alert">
This will also match the .alert.error selector (order does not matter)
</span>
<span class="alert">
This will match .alert selector
</span>
<span class="error">
This will match .error selector
</span>
<span class="alert error message--body">
This will match .alert.error.message--body selector
</span>
<p class="alert error">
This will match the p.alert.error selector
</p>
The selector will match in any order, but the order in which the style
is applied will change (especially for common properties).
HTML :
CSS :
CASE SENSITIVE SELECTOR
8. IDSELECTORS
#html-id-value { property: value; property: value; }
#article-title {
font-size: 30px;
font-weight: bold;
background: gainsboro;
}
#article-description{
font-size: 18px;
font-weight: lighter;
background: white;
}
HTML :
CSS :
<h4 id="article-title">
1914 translation by H. Rackham
</h4>
<p id="article-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
ID selectors can’t be combined with other IDs.
id attribute must match exactly the value given in the selector.
There should be only one element with a given ID in a document.
CASE SENSITIVE SELECTOR
IT’S NOT RECOMMENDED TO USE ID
SELECTORS, THEY ARE LESS FLEXIBLE,
HARD TO OVERRIDE (HIGHER SPECIFICITY
THAN CLASSES).
9. ATTRIBUTESELECTORS
Match elements that have a certain attribute with any value :
p[class]{
color: purple;
}
Select all p elements that
have a class attribute with
any value and make their text
color purple.
a[href][title]{
color: green;
}
<p class="error">Oups, this page is not available !</p>
Html tag (element)
Attribute
Content
attribute-name="attribute-value"
= End of html tag
<a
href="https://example.com"
title="Example Home Page"
>
Website (with title)
</a>
<a
href="https://new-site.com"
title="New Site Page"
>
New Website (with title)
</a>
Select any html hyperlink that has both an href and a title attribute (with any value) and make their
text color green.
<a
href="https://my-site.org"
>
Website (without title)
</a>
<a
title="This is not a link"
>
Incorrect link !
</a>
10. ATTRIBUTESELECTORS
Match elements that have a certain attribute with an exact value :
<p class="error">Oups, this page is not available !</p>
Html tag (element)
Attribute
Content
attribute-name="attribute-value"
= End of html tag
p[class="error"]{
color: purple;
}
Select all p elements that
have a class attribute with
exactly the value ‘error’ and
make their text color purple.
<a
href="https://example.com"
title="Example Home Page"
>
Website (with title)
</a>
a[href="https://example.com"][title="Example Home Page"]{
color: green;
}
CASE SENSITIVE SELECTOR
<a
href="https://new-site.com"
title="New Site Page"
>
New Website (with title)
</a>
<a
href="https://my-site.org"
>
Website (without title)
</a>
<a
title="This is not a link"
>
Incorrect link !
</a>
Select any html hyperlink that has an href attribute with exactly the value ‘https://example.com’ and a
title attribute with exactly the value ‘Example Home Page’ and make their text color green.
11. ATTRIBUTESELECTORS
Matching one word in a space-separated list (~) :
CASE SENSITIVE SELECTOR
<p
class="alert urgent info"
>
The is an information message!
</p>
<p
class="alert urgent warning"
>
The resource took too long to load!
</p>
<p
class="alert urgent error"
>
The service is unavailable at the moment
</p>
p[class~="alert"] {
color: purple;
font-weight: bold;
font-size: 18px;
}
p[class~="warning"] {
color: orange;
font-size: 12px;
}
p[class~="error"] {
color: red;
}
Select all p elements whose class attribute contains the word ‘alert’.
Select all p elements whose class attribute contains the word ‘warning’.
Select all p elements whose class attribute contains the word ‘error’.
a[title~="Nasa"] {
color: green;
font-weight: light;
font-size: 15px;
}
<a
href="https://www.nasa.gov/missions"
title="Nasa Missions Page"
>
Nasa Missions Page
</a>
<a
href="https://www.nasa.gov/"
title="Nasa Home Page"
>
Nasa Home Page
</a>
<a
href="https://www.spacex.com/"
title="Space X Home Page"
>
Space X Home Page
</a>
Space separated list
Space separated list
Space separated list
title="Nasa Missions Page"
title="NasaMissions Page"
title="Nasa-Missions Page"
THE ORDER OF SELECTORS MATTER !
The word only matches inside a space-separated list (case sensitive).
title="nasa Missions Page"
12. ATTRIBUTESELECTORS
Matching a substring within an attribute value (*) :
CASE SENSITIVE SELECTOR
THE ORDER OF SELECTORS MATTER !
<h4 class="article-details article-title">
1914 translation by H. Rackham
</h4>
<p class="article-details article-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.
</p>
<img
class="article-image"
alt="mission"
src="https://science.nasa.gov/files/science-pink/s3fs-public/styles/
large/public/thumbnails/image/ACE_0.jpg?itok=t2wtXFRN"
/>
h4[class*="details"] {
color: blue;
font-weight: bold;
font-size: 25px;
}
p[class*="details"] {
color: darkgray;
font-weight: light;
font-size: 15px;
}
*[class*="details"] {
text-decoration: underline;
}
*[class*="image"] {
width: 10rem;
height: 10rem;
}
Select all h4 elements whose class attribute contains the
substring ‘details’.
Select all p elements whose class attribute contains the
substring ‘details’.
Select all elements whose class attribute contains the
substring ‘details’.
Select all elements whose class attribute contains the
substring ‘image’.
h4[class~="details"] {
color: blue;
font-weight: bold;
font-size: 25px;
}
~ doesn’t much substring but one word in a
space-separated list.
input[title*="format"] {
background-color: red;
}
<input
type="tel"
title="Telephone number should be formatted as XXX-XXX-XXXX"
pattern="d{3}-d{3}-d{4}"
/>
<input
type="email"
title="Email is a mandatory field"
required
/>
img[class*="image"][alt*="details"] {
width: 20rem;
height: 20rem;
}
img[class~="article-image"][alt*="details"] {
width: 20rem;
height: 20rem;
}
Combining selectors
13. ATTRIBUTESELECTORS
Matching a substring at the beginning of an attribute value (^) :
CASE SENSITIVE SELECTOR
<img
class="article-details article-image"
alt="ps5-console"
src="https://pbs.twimg.com/media/EiGQrbFXsAAzrpq?format=jpg&name=small"
/>
<img
class="article-details article-image"
alt="xbox-activision"
src="https://image.jeuxvideo.com/medias-md/164253/1642526486-8301-card.jpg"
/>
<img
class="article-details article-image"
alt="xbox-serie-x"
src="https://static.actu.fr/uploads/2019/04/8c976cba-12d8-42ca-b419-c177f84b66bf.jpg"
/>
<img
class="article-details article-image"
alt="kindle-paperwhite"
src="https://img.20mn.fr/zBDkMRUzTDerDDNSZYSbWSk/648x415"
/>
img[alt^="xbox"] {
width: 30rem;
height: 30rem;
border: 2px solid red;
}
Selecting all img elements whose alt attribute starts with ‘xbox’.
<img
class="article-details article-image"
alt="xbox-activision game"
src="https://image.jeuxvideo.com/medias-md/164253/1642526486-8301-card.jpg"
/>
<img
class="article-details article-image"
alt="game xbox-serie-x"
src="https://static.actu.fr/uploads/2019/04/8c976cba-12d8-42ca-b419-c177f84b66bf.jpg"
/>
*[class^="alert"] {
border: 2px solid red;
}
<span class="alert error">
This will match the selector
</span>
<span class="error alert">
This will not match the selector
</span>
<p class="alert">
This will match the selector
</p>
<span class="alerterror">
This will match the selector
</span>
<span class="alert-error">
This will match the selector
</span>
<p class="Alert">
This will match the selector
</p>
14. ATTRIBUTESELECTORS
Matching a substring at the end of an attribute value ($) :
CASE SENSITIVE SELECTOR
<img
alt="X-ray glow"
src="https://www.sciencenews.org/wp-content/uploads/2022/01/012022_LK_COW_feat-1030x580.jpg"
/>
<img
alt="Neutron star collisions"
src=« https://www.sciencenews.org/wp-content/uploads/2021/11/110221_ec_heavy-elements_feat-1030x580.gif"
/>
<img
alt="Intense drought or flash floods"
src="https://www.sciencenews.org/wp-content/uploads/2022/01/011421_CG_flooding_feat-1030x580.png"
/>
<img
alt="The first magnetar flare"
src="https://www.sciencenews.org/wp-content/uploads/2021/01/011421_lg_magnetar_feat-1030x580.jpg"
/>
img[src$=".jpg"] {
width: 10rem;
height: 10rem;
border: 2px solid red;
}
img[src$=".png"] {
width: 15rem;
height: 15rem;
border: 2px solid yellow;
}
a[href$=".pdf"] {
border: 2px solid purple;
}
<a
href="https://cfm.ehu.es/ricardo/docs/python/Learning_Python.pdf"
title="Learning Python"
>
Learning Python
</a>
<a
href="https://cfm.ehu.es/ricardo/docs/python/Learning_Python.PDF"
title="Learning Python"
>
Learning Python
</a>
<a
href="https://cfm.ehu.es/ricardo/docs/python/Learning_Python.csv"
title="Learning Python"
>
Learning Python Stats
</a>
15. ATTRIBUTESELECTORS
Case insensitive identi
fi
er (i) :
a[href$=".pdf" i] {
border: 2px solid purple;
}
<a
href="https://cfm.ehu.es/ricardo/docs/python/Learning_Python.pdf"
title="Learning Python"
>
Learning Python
</a>
<a
href="https://cfm.ehu.es/ricardo/docs/python/Learning_Python.PDF"
title="Learning Python"
>
Learning Python
</a>
a[title~="Nasa" i] {
color: green;
font-weight: light;
font-size: 15px;
}
<a
href="https://www.nasa.gov/"
title="Nasa Home Page"
>
Nasa Home Page
</a>
<a
href="https://www.nasa.gov/missions"
title="nasa Misions Page"
>
Nasa Misions Page
</a>
input[title*="format" i] {
background-color: red;
}
<input
type="tel"
title="Phone number should be formatted as XXX-XXX-XXXX"
pattern="d{3}-d{3}-d{4}"
/>
<input
type="tel"
title="phone number should be Formatted as XXX-XXX-XXXX"
pattern="d{3}-d{3}-d{4}"
/>
16. ATTRIBUTESELECTORS(RECAP)
[my-attribute="attribute-value"]
Select any element with an attribute 'my-attribute'
whose value is exactly equal to ‘attribute-value'.
[my-attribute~="attribute-value"]
Select any element with an attribute ‘my-attribute’
whose value contains the word ‘attribute-value’ in
a space-separated list of words.
[my-attribute*="attribute-value"]
Select any element with an attribute 'my-attribute'
whose value contains the substring ‘attribute-
value'.
[my-attribute^="attribute-value"]
Select any element with an attribute 'my-attribute'
whose value begins with ‘attribute-value'.
[my-attribute$="attribute-value"]
Select any element with an attribute 'my-attribute'
whose value end with ‘attribute-value'.
[my-attribute="attribute-value" i] Case insensitive identi
fi
er (i)
17. DESCENDANTCOMBINATOR
selector1 selector2 { property: value; }
div span {
color: red;
}
Set the text color to red for any span
element descending from div
<div>
<h4>
1914 translation by H. Rackham
</h4>
<span>
1. This will match
</span>
<span>
<span>
2. This will match
</span>
</span>
</div>
<div>
<p>
<span>3.This will match</span>
</p>
</div>
.article-details span {
color: red;
}
Selector can be class names
<div className="article-details">
<span>
<span>
1. This will match
</span>
</span>
<p>
<span>
<span>
2. This will match
</span>
</span>
</p>
</div>
18. CHILDCOMBINATOR
selector1 > selector2 { property: value; }
div > span {
color: red;
}
Set the text color to red for any span
element descending from div
<div>
<h4>
1914 translation by H. Rackham
</h4>
<span>
1. This will match
</span>
<span>
<span>
2. This will match
</span>
</span>
</div>
<div>
<p>
<span>3.This will not match</span>
</p>
</div>
( stricter than the descendant combinator )
Elements matched by the second selector must be the immediate
children of the elements matched by the
fi
rst selector :
.article-details > span {
color: red;
}
Selector can be class names
<div>
<h4>
1914 translation by H. Rackham
</h4>
<span>
1. This will not match
</span>
<div className="article-details">
<span>
<span>
2. This will match
</span>
</span>
</div>
</div>
<div>
<p>
<span>3.This will not match</span>
</p>
</div>
19. ADJACENTSIBLINGCOMBINATOR
former_element + target_element { property: value; }
Select an element that immediately follows another element with the same parent :
h1 + p {
margin-top: 0;
}
Remove the top margin from a paragraph
immediately following an h1 .
Select any p element that immediately follows an h1
element that shares a parent with the p element.
<div>
<h1>
1914 translation by H. Rackham
</h1>
<p>
This paragraph will match
</p>
<p>
This will not match
</p>
</div>
This p isn’t immediately after h1.
20. GENERALSIBLINGCOMBINATOR
former_element ~ target_element { property: value; }
Select an element that follows another element when both elements share the same parent :
h2 ~ ol {
font-style: italic;
}
The two elements do not need to be adjacent sibling.
Italicize any ol element that follows an h2 element
and also share a parent with h2.
<div>
<h2>
1914 translation by H. Rackham
</h2>
<p>
Contrary to popular belief, Lorem Ipsum is not simply random text.
</p>
<ol>
<li>1. This will match</li>
<li>2. This will match</li>
<li>3. This will match</li>
</ol>
<p>
Contrary to popular belief, Lorem Ipsum is not simply random text.
</p>
<ol>
<li>4. This will match</li>
<li>5. This will match</li>
<li>6. This will match</li>
</ol>
<div>
<ol>
<li>1. This will not match</li>
<li>2. This will not match</li>
<li>3. This will not match</li>
</ol>
</div>
</div>
Follows h2 + shares the same parent
Follows h2 + shares the same parent
Follows h2 but doesn’t shares the same parent
21. SELECTINGEMPTYELEMENTS
element:empty { property: value; }
Select any element that has no children of any kind, including text nodes (text and whitespace) :
<div>
<p></p>
<p> </p>
<p>
</p>
<p><!--This is a comment--></p>
</div>
This will match
This will not match (white space)
This will not match
This will match (comments are not considered content).
*: empty { display:none;} can hide elements like input,
img, text area, because they don’t have children.
p:empty {
display: none;
}
22. SELECTINGUNIQUECHILDREN
Select elements when they are the only child element of another element :
element:only-child { property: value; }
img:only-child {
border: 1px solid red;
}
<a href="http://w3.org/">
<img
src="w3.png"
alt="W3C"
/>
</a>
<a href="http://w3.org/">
<img
src="w3.png"
alt="W3C"
/>
<em>The W3C</em>
</a>
This will match : img is the only child of a.
This will not match : img isn’t the only child of a.
Select img that are the only child.
<ol>
<li>
First
<ul>
<li>This list has just one element.</li>
</ul>
</li>
<li>
Second
<ul>
<li>This list has three elements.</li>
<li>This list has three elements.</li>
<li>This list has three elements.</li>
</ul>
</li>
</ol>
li:only-child {
color: red;
list-style-type: square;
}
23. SELECTINGFIRSTCHILDREN
Select elements that are the
fi
rst children of others elements :
element:
fi
rst-child { property: value; }
<div>
<p>This text is selected!</p>
<p>This text isn't selected.</p>
</div>
<div>
<h2>This text isn't selected: it's not a `p`.</h2>
<p>This text isn't selected.</p>
</div>
p:first-child {
color: lime;
background-color: black;
padding: 5px;
}
ul li:first-child {
color: red;
font-weight: bold;
}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>
Item 3
<ul>
<li>Item 3.1</li>
<li>Item 3.2</li>
<li>Item 3.3</li>
</ul>
</li>
</ul>
24. SELECTINGLASTCHILDREN
Select elements that are the last children of others elements :
element:last-child { property: value; }
<div>
<p>This text isn't selected.</p>
<p>This text is selected!</p>
</div>
<div>
<p>This text isn't selected.</p>
<h2>This text isn't selected: it's not a `p`.</h2>
</div>
p:last-child {
color: lime;
background-color: black;
padding: 5px;
}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>
Item 3
<ul>
<li>Item 3.1</li>
<li>Item 3.2</li>
<li>Item 3.3</li>
</ul>
</li>
</ul>
ul li:last-child {
border: 1px solid red;
color: red;
}
25. SELECTINGEVERYnthCHILDREN
Select elements based on their position among a group of siblings :
element:nth-child(number) { property: value; }
element:nth-child(odd) { property: value; }
element:nth-child(even) { property: value; }
element:nth-child(a * n + b) { property: value; }
element:nth-last-child(number) { property: value; }
element:nth-last-child(odd) { property: value; }
element:nth-last-child(even) { property: value; }
element:nth-last-child(a * n + b) { property: value; }
Count start from top to bottom Count start from bottom to top
n starts from 0 n starts from 0
26. NEGATIONPSEUDO-CLASS
element:not(selector) { property: value; }
.moreinfo:not(li) {
font-style: italic;
}
Select all elements with a class whose value contains the word
‘moreinfo’ as long as they are not li elements
p:not(:not(p))
Cannot be nested
*.article-link:not(li):not(p){
color: red;
}
Select all elements with class ‘article-link’ that are neither list items
nor paragraphs.
27. HYPERLINKPSEUDO-CLASSES
:link Matches links that have not yet been visited.
:visited Matches links that have been visited.
a:link{
color: blue;
}
a:visited{
color: red;
}
a.article-details-link:link, a[href^="http"]:link {
color: slateblue;
}
a.article-details-link:visited, a[href^="http"]:visited {
color: maroon;
}
a#article-link-id:link {
color: yellow;
}
a#article-link-id:visited {
color: gray;
}
Class name selectors Element ID selectors
28. USERACTIONPSEUDO-CLASSES
:hover Matches when an element is hovered.
:active
Matches when an item is being activated by the
user, for example clicked on.
:focus Matches when an element has focus.
29. UI-STATEPSEUDO-CLASSES
:enabled Represents a user interface element that is in an enabled state.
:disabled Represents a user interface element that is in a disabled state.
:read-only Represents any element that cannot be changed by the user.
:read-write Represents any element that is user-editable.
:checked
Matches when elements such as checkboxes and radiobuttons are
toggled on.
:indeterminate Matches when UI elements are in an indeterminate state.
:default
Matches one or more UI elements that are the default among a set of
elements.
:valid Matches an element with valid contents.
:invalid Matches an element with invalid contents.
:in-range
Applies to elements with range limitations, for example a slider control,
when the selected value is in the allowed range.
:out-of-range
Applies to elements with range limitations, for example a slider control,
when the selected value is outside the allowed range.
:required Matches when a form element is required.
:optional Matches when a form element is optional.