CSS3 Selectors Module Part-2

UX/UI

January 4, 2017October 20, 2020 Gourahari Patnaik

In continuation of my earlier blog on ‘CSS3 Selectors Module’ in this second part, I will explain the concepts of Combinators and Attribute Selectors.

Combinators

There are four different combinators in CSS3 selectors:

Descendant Selector(space)
Direct Child Selector(>)
Adjacent Sibling Selector(+)
General Sibling Selector(~)

Descendant Selector Example:

HTML

<p>The descendant selector matches all elements that are descendants of a specified element.</p>
 <p>The following example selects all <p> elements inside <div> elements.</p>
 <div>
 <p>Paragraph 1 in the Block Element.</p>
 <p>Paragraph 2 in the Block Element.</p>
 <section><p>Paragraph 3 in the Block Element.</p></section>
 <div><p>Paragraph 4 in the Block Element.</p></div>
 </div>
 <p>Paragraph 5 Not in an inside the DIV Element.</p>
 <p>Paragraph 6 Not in an inside the DIV Element.</p>

CSS

div p {background-color: Yellow;}

Output

Direct Child Selector Example:

HTML

<p>The child selector selects all elements that are the immediate children of a specified element.</p>
 <p>The following example selects all <p> elements that are immediate children of a <div> element.</p>
 <div class="classname">
 <p>Paragraph 1 in the Block Element.</p>
 <p>Paragraph 2 in the Block Element.</p>
 <section><p>Paragraph 3 in the Block Element.</p></section>
 <div><p>Paragraph 4 in the Block Element.</p></div>
 </div>
 <p>Paragraph 5. Not in an inside the div Element.</p>
 <p>Paragraph 6. Not in an inside the div Element.</p>

CSS

div.classname {border-radius:7px; background-color:#f2f2f2; padding:20px;
 width:500px;}
 div > p {background-color:Yellow;}

Output

Adjacent Sibling Selector Example:

HTML

<p>The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element.</p>
 <p>Sibling elements must have the same parent element, and "adjacent" means "immediately following".</p>
 <p>The following example selects all &lt;p&gt; elements that are placed immediately after &lt;div&gt; elements.</p>
 <div>
 <p>Content 1 in the Block Element.</p>
 <p>Content 2 in the Block Element.</p>
 </div>
 <p>Content 3. Not in a Block Element.</p>
 <p>Content 4. Not in a Block Element.</p>

CSS

div + p {background-color:Yellow;}

Output

General Sibling Selector Example:

HTML

<p>The general sibling selector selects all elements that are siblings of a specified element.</p>
 <p>The following example selects all <p> elements that are siblings of <div> elements</p>
 <div>
 <p>Content 1 in the Block Element.</p>
 <p>Content 2 in the Block Element.</p>
 </div>
 <p>Content 3. Not in a Block Element.</p>
 <p>Content 4. Not in a Block Element.</p>

CSS

div ~ p {background-color:Yellow;}

Output

Attribute Selectors

Select elements based on attributes

From elements attribute Example:

HTML

<div>
 <form action="index.html">
 <label for="fname">First Name</label>
 <input type="text" id="fname" name="firstname">
 <label for="lname">Description</label>
 <textarea name="message" rows="10" cols="50">Swachh Bharat Challenge is an initiative to share your experiences of Swachh Bharat Abhiyan and invite other people to accept the challenge and join hands in the Abhiyan. You can open up the challenge to a maximum of nine persons and similarly, each of these nine persons can also challenge nine more…this way the chain of activities would keep growing.</textarea>
 <label for="country">State</label>
 <select id="country" name="country">
 <option value="bangalore">Bangalore</option>
 <option value="delhi">Delhi</option>
 </select>
 <input type="button" value="Button">
 <input type="reset" value="Reset">
 <input type="submit" value="Submit">
 </form>
 </div>

CSS

div{border-radius:7px; background-color:#f2f2f2; padding: 20px; width:500px;}
 input[type=text], select, textarea {width:100%; padding:10px 10px; margin:8px 0;
 display:inline-block; border:1px solid #ccc; border-radius:5px;}
 input[type=button], input[type=submit], input[type=reset] {
 background-color:#4CAF50; border:none; color:white; border:none;
 padding:12px 32px; text-decoration:none; margin:4px 7px;
 cursor:pointer; border-radius:5px; width:30%;}

Output

[attribute=value] – Selects all elements with target=”_blank”

Attribute=value Example

HTML

<div class="targetAttr">
 <p>The link with target="_blank" gets a yellow background:</p>
 <a href="https://www.google.co.in/" target="_blank">Google.co.in</a>
 <a href="https://in.yahoo.com/">Yahoo.com</a>
 <a href="http://www.wikipedia.org" target="_top">Wikipedia.org</a>
 </div>

CSS

.targetAttr{border-radius:7px; border:2px solid #f2f2f2; padding:20px;
 width:600px; margin:50px 0px; background-color: #f2f2f2; font-size:20px;}
 a[target=_blank] {background-color: yellow;}

Output

[attribute~=value] – Selects all elements with a title attribute containing the word “flower”

attribute~=value Example :

HTML

<div class="targetAttr">
 <p>The [attribute~=value] selector is used to select elements with an attribute value containing a specified word.</p>
 <p>The image with the title attribute containing the word "flower" gets a yellow border.</p>
 <img src="1.jpg" title="klematis flower" width="160" height="160" alt="" />
 <img src="2.jpg" title="flowers" width="160" height="160" alt="" />
 <img src="3.jpg" title="landscape" width="160" height="160" alt="" />
 </div>

CSS

[title~=flower] {border: 5px solid yellow;}

Output

[attribute^=value] – Selects every <a> element whose href attribute value begins with “top”

attribute^=value Example:

HTML

<div class="targetAttr">
 <p>The [attribute^="value"] selector is used to select elements whose attribute value begins with a specified value.</p>
 <p>The following example selects all elements with a class attribute value that begins with "top":</p>
 <h1 class="top-header">Welcome to CSS3 Selectors</h1>
 <p class="top-text">Hi Guys</p>
 <p class="contenttop">Good afternoon</p>
 </div>

CSS

[class^="top"] {background: yellow;}

Output

[attribute$=value] – Selects every <a> element whose href attribute value ends with “test”

attribute$=value Example:

HTML

<div class="targetAttr">
 <p>The [attribute$="value"] selector is used to select elements whose attribute value ends with a specified value.</p>
 <p>The following example selects all elements with a class attribute value that ends with "test":</p>
 <p class="first_test">The first div element.</p>
 <p class="second">The second div element.</p>
 <p class="my-test">The third div element.</p>
 <p class="mytest">This is some text in a paragraph.</p>
 </div>

CSS

[class$="test"]{background: yellow;}

Output

:enabled – Selects every enabled <input> element

:disabled – Selects every disabled <input> element

Enabled and Disabled Example:

HTML

<div>
 First name: <input type="text" value="Enabled" enabled="enabled"><br>
 Last name: <input type="text" value="Disabled" disabled="disabled">
 </div>

CSS

input[type=text]:enabled {background:Yellow;}
 input[type=text]:disabled {background: grey;}

Output

Don’t miss the next blog in the series, `CSS3 Selectors – Module – Part 3′.

Author

Gourahari Patnaik
Gourahari Patnaik works as Software Engineer with Trigent Software. He has 6+ years of experience as a UI Developer/Web Developer, building enterprise web applications. He has strong expertise in HTML5 and CSS3, Bootstrap Responsive Web technologies, jQuery and JavaScript. Gourahari also has experience in W3C Validation and Solving Browser and Device and Mobile compatibility issues along with experience in in SASS framework.
View all posts