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

Detailed explanation of the use of HTML header tags

HTML consists of two parts: head and body ** The ...

Four completely different experiences in Apple Watch interaction design revealed

Today is still a case of Watch app design. I love...

Detailed explanation of the idea of ​​installing mysql8.0.11 and changing the root password and connecting navicat for mysql

1.1. Download: Download the zip package from the ...

TABLE tags (TAGS) detailed introduction

Basic syntax of the table <table>...</tab...

How to use Maxwell to synchronize MySQL data in real time

Table of contents About Maxwell Configuration and...

Sample code of uniapp vue and nvue carousel components

The vue part is as follows: <template> <...

Various methods to restart Mysql under CentOS (recommended)

1. MySQL installed via rpm package service mysqld...

Example code for implementing equal width layout in multiple ways using CSS

The equal-width layout described in this article ...

In-depth understanding of Vue-cli4 routing configuration

Table of contents Preface - Vue Routing 1. The mo...

Method of implementing recursive components based on Vue technology

describe This article introduces a method to impl...

MySQL SQL statement analysis and query optimization detailed explanation

How to obtain SQL statements with performance iss...

Docker builds cluster MongoDB implementation steps

Preface Due to the needs of the company's bus...

What is WML?

WML (Wireless Markup Language). It is a markup la...

MySQL database import and export data error solution example explanation

Exporting Data Report an error SHOW VARIABLES LIK...

Understanding JSON (JavaScript Object Notation) in one article

Table of contents JSON appears Json structure Jso...