Today, we’re diving into one of the most powerful concepts used in web development and automation testing
1.Element Selector
A selector is used in CSS to select (target) the HTML element(s) want to style. write a selector before a {} block, and then define styles inside that block.
p {
color: blue;
}
2.ID Selector
The ID selector targets an element that has a specific id attribute.
<!DOCTYPE html>
<html>
<head>
<style>
#mainBox {
background-color: orange;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div id="mainBox">I am styled using ID selector</div>
<div>I am not affected</div>
</body>
</html>
3.Class Selector
The Class Selector targets one or more HTML elements that share the same class attribute.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
background-color: lightblue;
border: 1px solid blue;
padding: 10px;
margin: 5px;
}
</style>
</head>
<body>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div>I'm a normal div</div>
</body>
</html>
4.Universal Selector
The Universal Selector selects all elements on the page.
* {
/* styles */
}
5.Attribute Selectors
Attribute Selectors are used to style HTML elements that have specific attributes or attribute values.
Basic Attribute Presence
<style>
[type] {
border: 2px solid green;
}
</style>
<input type="text">
<input type="password">
Attribute with Specific Value
<style>
[type="password"] {
background-color: lightpink;
}
</style>
<input type="text">
<input type="password">
6.Combinator Selectors
Example 1: Descendant Selector ( )
All <p> tags inside any <div> tag will become blue — no matter how deeply nested.
<style>
div p {
color: blue;
}
</style>
<div>
<p>This will be blue</p>
<section><p>This also will be blue</p></section>
</div>
Example 2: Child Selector (>)
Only <p> tags that are direct children of <div> get styled.
<style>
div > p {
color: green;
}
</style>
<div>
<p>Green text</p>
<section><p>Not green</p></section>
</div>
Example 3: Adjacent Sibling (+)
Only the first <p> immediately after <h2> will get the style.
<style>
h2 + p {
background: yellow;
}
</style>
<h2>Heading</h2>
<p>This paragraph will be yellow</p>
<p>This will NOT be styled</p>
Example 4: General Sibling (~)
All <p> tags after <h2> (same parent) will be red.
<style>
h2 ~ p {
color: red;
}
</style>
<h2>Title</h2>
<p>Red</p>
<p>Also red</p>
7.Pseudo-classes (:)
A pseudo-class targets elements based on their state or position in the document — like "hovered", "first-child", "visited", etc.
Example:1 :hover
When you hover your mouse over the button, it turns orange.
<style>
button:hover {
background-color: orange;
}
</style>
<button>Hover Me</button>
Example:2 :first-child
Only the first <p> inside the <div> becomes bold.
<style>
p:first-child {
font-weight: bold;
}
</style>
<div>
<p>I am the first paragraph</p>
<p>I am the second</p>
</div>
Example:3 :nth-child(n)
<style>
li:nth-child(2) {
color: red;
}
</style>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
The 2nd list item turns red.
Example:4 :checked
When checkbox is selected, label turns green.
<style>
input:checked + label {
color: green;
}
</style>
<input type="checkbox" id="box" />
<label for="box">Checked Label</label>
8. Pseudo-elements (::)
A pseudo-element lets you style specific parts of an element, like:
- Before or after its actual content
- First letter
- First line
Example:1 ::before
<style>
p::before {
content: "!!!";
color: orange;
}
</style>
<p>This is a paragraph.</p>
Output:!!!orange
Example:2 ::after
<style>
p::after {
content: "!!!";
color: green;
}
</style>
<p>This is magic</p>
Output: This is magic!!!
Example:3 ::first-letter
<style>
p::first-letter {
font-size: 30px;
color: red;
}
</style>
<p>This is a big starting letter</p>
Output: The first letter of the paragraph is styled differently.
Example:4 ::first-line
<style>
p::first-line {
font-weight: bold;
color: blue;
}
</style>
<p>This line is styled only in the first line of this paragraph.</p>
output: Only the first line of the paragraph gets the style.
What is XPath?
XPath (XML Path Language) is a language used to navigate through elements and attributes in an XML or HTML document.
<div class="cls">box1</div>
<div class="cls">box2</div>
<div class="cls">box3</div>
<div class="cls">box4</div>
<div class="cls">box5</div>
<div class="cls">box6</div>
1.Select by Tag
Get all <div> elements
//div
// = anywhere in the document
div = the tag name
2.Select by Class
//div[@class='cls']
Result: All 6 <div> will be selected, because all of them have class cls.
3.Select by Text
//div[text()='box4']
Only exact match will work here. It won’t match if there’s an extra space.
4.Select 6th Box (Position Based)
(//div[@class='cls'])[6]
Note: We wrap it with () to indicate order, then use [6].
5.Starts-with Text
//div[starts-with(text(), 'box')]
All 6 boxes (because all start with "box")
6.Contains Text
//div[contains(text(), '4')]
7.Partial Match for Class or Text
1.Partial match in class (in your case not useful because full class is same):
//div[contains(@class, 'cl')]
All 6 boxes (since class is cls)
2.Partial match in text (like “bo”, “ox6”)
//div[contains(text(), 'ox6')]
See you soon in the next blog!
Happy Coding!
Top comments (0)