Share 5 helpful CSS selectors to enrich your CSS experience

Share 5 helpful CSS selectors to enrich your CSS experience
With a lot of CSS experience as a web designer, we will remember all kinds of code syntax, compatibility and snippets. There are some specific CSS that can really help change your website design. Changing older technical rules and declarations, using less code to write the same effect is our constant pursuit of the goal. Here are 5 CSS selectors that will help you keep your XHTML pages cleaner.
1. Match subclasses <br />When designing menus, sometimes you need to select elements with multiple classes, such as selecting all elements of "item" and "active":

Copy code
The code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style>
/* styles here */
</style>
</head>
<body>
<ul class="list">
<li class="item">item 1</li>
<li class="item active">active item 2</li>
<li class="active">item 3</li>
</ul>
</body>
</html>

The typical solution is to use a parent element, for example:
.list .item {color: #ccc;} /* All elements with class 'item' */
.list .active {text-decoration: underline;} /* *All elements with class "item" and "active"**/
But what if you need to exclude elements with class "active" but leave "item" alone? Here is the subset matching selector code:

Copy code
The code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style>
.item {color: #ccc;} /* all elements with 'item' class */
.item.active {text-decoration: underline;} /* all elements with 'item' and 'active' class */
</style>
</head>
<body>
<ul>
<li class="item">.item CSS selector applied</li>
<li class="item active">.item and .item.active CSS selectors applied </li>
<li class="item active someOneMoreClass">.item and .item.active CSS selectors applied too</li>
<li class="active">no CSS selectors applied</li>
</ul>
</body>
</html>

Browser support: Firefox, Chrome, Safari, IE 7 and above
2. Attribute selection <br />Sometimes, you may need to match a specific attribute value of an element. The most common case for me is form submission, for example. All text input elements have one style, and the submit button has another style. The most common way I see this problem is to define a different style for the inputs, like the following example:

Copy code
The code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style>
label {display: block; color: #444;}
input.text {border: 1px solid #ccc; color: #333; padding: 3px;} //Define another class for the text box
input.submit {color: #333; border: 1px solid #333; background-color: #eee;} //Define a class for the submit button
</style>
</head>
<body>
<form>
<label for="login">Login</label>
<input class="text" type="text" name="login" id="login" value="" />
<label for="login">Password</label>
<input class="text" type="password" name="password" id="password" value="" />

<input class="submit" type="submit" value="Push me" />
</form>
</body>
</html>

What is written above is indeed correct, but I have a solution without defining additional classes. For this problem, I will use attribute selectors:

Copy code
The code is as follows:

/* Matches any element with the "name" attribute set (any value) */
a[name] { ... styles ..}
/* Matches any INPUT element with a "type" attribute value of "text */
input[type="text"] { ... styles ..}
/* matches any DIV element whose "myattribute" attribute value is a space-delimited list of values, one of which is exactly equal to "value3".
eg <div myattribute="value1 value2 value3 value4"> */
div[myattribute~="value3"] { ... styles ..}
/* Matches any DIV element whose "myattribute" attribute has a hyphen-delimited value.
eg <div myattribute="value1-value2-value3-value4"> */
div[myattribute~="value2"] { ... styles ..}

So using these rules, you can write the code like this

Copy code
The code is as follows:

<style>
label {display: block; color: #444;}
/* all text- and password- inputs */
input[type="text"], input[type="password"] {border: 1px solid #ccc; color: #333; padding: 3px;}
/* just submit buttons */
input[type="submit"] {color: #333; border: 1px solid #333; background-color: #eee;}
</style>
<form>
<label for="login">Login</label>
<input type="text" name="login" id="login" value="" />
<label for="password">Password</label>
<input type="password" name="password" id="password" value="" />

<input type="submit" value="Push me" />
</form>

Browser support: Firefox, Chrome, Safari, IE 7 and above.
3. Adjacent selectors <br />Another problem you may face is applying styles to elements on the same level (like placing the mouse pointer over an item to see a menu effect):

Copy code
The code is as follows:

/* Matches any element before a sibling element with the class "active" * */
a.active + a
/* Matches any element after an "active" class on the same level**/
a + a.active
/* ... and some useful tips ... */
/* Matches all li elements except the last one*/
li + li { .. style .. }
/* Matches the first element of A:hover*/
a:hover { /* First style: hover element */ }
/* Styles except for the first hover element
*/
a + a:hover { .. styles .. }

It can be used for example to style menus etc.
Here's an easier way using the adjacent selector:

Copy code
The code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style>
.menu a {
/*Menu item style*/
border: 1px solid #888;
padding: 3px 10px;
color: #333;
background-color: #fff;
text-decoration: none;
margin: 0;
float: left;
z-index: 1;
position: relative;
}
.menu a:hover {
z-index: 10000;
position: relative;
padding: 8px 20px 8px 20px;
background-color: #aed8fb;
border-left: 1px solid #888;
margin: -5px -10px 0 -10px;
}
.menu a + a:hover {
margin-right: -10px;
margin-left: -11px;
}
.menu a + a {
border-left: none;
}
.menu .clear {
float: none;
clear: both;
}
</style>
</head>
<body>
<div class="menu">
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
<a href="#">Item 4</a>
<div class="clear"></div>
</div>
</body>
</html>

Browser support: Firefox, Chrome, Safari, IE 7 and above
4. Child selector <br />The child selector matches elements that are children of some other elements. A subselector consists of two or more selectors separated by ">".
/* Matches all P elements within a DIV element*/
div > p { .. slyles .. }
div ol>li p { .. styles ..}
If you want to left-align all images inside a paragraph inside some div with content, the following code can help:

Copy code
The code is as follows:

<div class="content">
<p>Lorem lorem lorem <img src="/images.jpg" alt="this image should be aligned left" /></p>
<p>Lorem lorem lorem <img src="/images.jpg" alt="this image should be aligned left too" /> Lorem lorem lorem </p>
<img src="/images.jpg" alt="this image shouldn't be aligned left too" />
</div>

You can do the following:
div.content p > img {float: left;}
Browser support: Firefox, Chrome, Safari, IE 7 and above.
5. General Selection Tips <br />Finally, some useful tips. As you know the universal selector ("*") matches any element and can be useful in some places if combined with other selectors.
For example:

Copy code
The code is as follows:

/* Matches all elements with an "href" attribute */
*[href] { .. styles ..}
/* Matches all elements with an empty 'alt' attribute */
*[alt=""]
/* Matches all P elements which are grandchild (not direct child) of DIV element */
div * p { .. styles ..}

Browser support: Firefox, Chrome, Safari, IE 7 and above.

<<:  Learn MySQL index pushdown in five minutes

>>:  JavaScript flow control (branching)

Recommend

How to install and configure MySQL and change the root password

1. Installation apt-get install mysql-server requ...

The latest graphic tutorial of mysql 8.0.16 winx64 installation under win10

In order to download this database, it takes a lo...

vue-electron problem solution when using serialport

The error is as follows: Uncaught TypeError: Cann...

In-depth understanding of Vue transition and animation

1. When inserting, updating, or removing DOM elem...

Detailed tutorial for upgrading MySQL 5.7.17 free installation version on Windows (x86, 64bit)

MySQL needs to be upgraded to version 5.5.3 or ab...

Detailed explanation of mysql transaction management operations

This article describes the MySQL transaction mana...

How to deploy a simple c/c++ program using docker

1. First, create a hello-world.cpp file The progr...

How to use the realip module in Nginx basic learning

Preface There are two types of nginx modules, off...

vue+ts realizes the effect of element mouse drag

This article example shares the specific code of ...

Detailed explanation of the use of DockerHub image repository

Previously, the images we used were all pulled fr...

Detailed explanation of command to view log files in Linux environment

Table of contents Preface 1. cat command: 2. more...

Three methods of automatically completing commands in MySQL database

Note: The third method is only used in XSell and ...

Detailed explanation of Nginx current limiting configuration

This article uses examples to explain the Nginx c...

HTML page header code is completely clear

All the following codes are between <head>.....

Implementation of React configuration sub-routing

1. The component First.js has subcomponents: impo...