CSS Selectors | CSS TUTORIAL

 

 

Simple Selectors

1.  Universal selector (*)

* {
margin: 0;
padding: 0;
}

Let's knock the obvious ones out, for the beginners, before we move on to the more advanced selectors. The star symbol will target every single element on the page. Many developers will use this trick to zero out the margins and padding. While this is certainly fine for quick tests, I'd advise you never to use this in production code. It adds too much weight on the browser, and is unnecessary. The * can also be used with child selectors.

#container * {
 border: 1px solid black;
}

This will target every single element that is a child of the #container div. Again, try not to use this technique very much, if ever.  

2. ID Selector

#container {
   width: 960px;
   margin: auto;
}

Prefixing the hash symbol to a selector allows us to target by id. This is easily the most common usage; however, be cautious when using id selectors. Ask yourself: do I absolutely need to apply an id to this element in order to target it? id selectors are rigid and don't allow for reuse. If possible, first try to use a tag name, one of the new HTML5 elements, or even a pseudo-class.  

3. Class Selector

.error {
  color: red;
}

This is a class selector. The difference between ids and classes is that, with the latter, you can target multiple elements. Use classes when you want your styling to apply to a group of elements. Alternatively, use ids to find a needle in a haystack, and style only that specific element.  

4. Element Selector

a { color: red; }
ul { margin-left: 0; }

What if you want to target all elements on a page, according to their type, rather than an id or class name ? Keep it simple, and use a type selector. If you need to target all unordered lists, use ul {}.   Read More : Learn CSS - CSS Introduction  

Combinator Selectors

5. Descendant Selector

li a {
  text-decoration: none;
}

The next most common selector is the descendant selector. When you need to be more specific with your selectors, you use these. For example, what if, rather than targeting all anchor tags, you only need to target the anchors which are within an unordered list? This is specifically when you'd use a descendant selector. Pro-tip: If your selector looks like X Y Z A B.error, you're doing it wrong. Always ask yourself if it's absolutely necessary to apply all of that weight.  

6. Adjacent sibling   Selector

ul + p {
   color: red;
}

This is referred to as an adjacent selector. It will select only the element that is immediately preceded by the former element. In this case, only the first paragraph after each ul will have red text.

7. Child Selector

div#container > ul {
  border: 1px solid black;
}

The difference between the standard X Y and X > Y is that the latter will only select direct children. For example, consider the following markup.

<div id="container">
   <ul>
      <li> List Item
        <ul>
           <li> Child </li>
        </ul>
      </li>
      <li> List Item </li>
      <li> List Item </li>
      <li> List Item </li>
   </ul>
</div>

A selector of #container > ul will only target the uls which are direct children of the div with an id of container. It will not target, for instance, the ul that is a child of the first li. For this reason, there are performance benefits in using the child combinator. In fact, it's recommended particularly when working with JavaScript-based CSS selector engines.  

8. General Sibling Selector (X ~ Y)

ul ~ p {
   color: red;
}

This sibling combinator is similar to X + Y, but it's less strict. While an adjacent selector (ul + p) will only select the first element that is immediately preceded by the former selector, this one is more generalized. It will select, referring to our example above, any p elements, as long as they follow a ul.  

Attribute Selectors

9. [attribute] Selector

a[title] {
   color: green;
}

Referred to as an attributes selector, in our example above, this will only select the anchor tags that have a title attribute. Anchor tags which do not will not receive this particular styling. But what if you need to be more specific? Check out the next example!  

10. [attribute="value"] Selector

a[href="https://hpkingdom.com"] {
  color: #83b348; /* Envato green */
}

The snippet above will style all anchor tags which link to https://hpkingdom.com; they'll receive our branded green color. All other anchor tags will remain unaffected. Note that we're wrapping the value in quotes. Remember to also do this when using a JavaScript CSS selector engine. When possible, always use CSS3 selectors over unofficial methods. This works well, although it's a bit rigid. What if the link does indeed direct to Envato Tuts+, but maybe the path is hpkingdom.com rather than the full URL? In those cases, we can use a bit of the regular expressions syntax.  

11. [attribute*="value"] Selector

a[href*="tutsplus"] {
  color: #83b348; /* Envato green */
}

There we go; that's what we need. The star designates that the proceeding value must appear somewhere in the attribute's value. That way, this covers tutsplus.com, hpkingdom.com, and even webdesign.tutsplus.com. Keep in mind that this is a broad statement. What if the anchor tag linked to some non-Envato site with the string tutsplus in the URL? When you need to be more specific, use ^ and $, to reference the beginning and end of a string, respectively.  

12. [attribute^="value"] Selector

a[href^="http"] {
   background: url(path/to/external/icon.png) no-repeat;
   padding-left: 10px;
}

  Ever wonder how some websites are able to display a little icon next to the links which are external? I'm sure you've seen these before; they're nice reminders that the link will direct you to an entirely different website. This is a cinch with the carat symbol. It's most commonly used in regular expressions to designate the beginning of a string. If we want to target all anchor tags that have an href which begins with http, we could use a selector similar to the snippet shown above. Notice that we're not searching for https://; that's unnecessary, and doesn't account for the URLs that begin with https://. Now, what if we wanted to instead style all anchors which link to, say, a photo? In those cases, let's search for the end of the string.  

13. [attribute$="value"] Selector

a[href$=".jpg"] {
   color: red;
}

Again, we use a regular expressions symbol, $, to refer to the end of a string. In this case, we're searching for all anchors which link to an image—or at least a URL that ends with .jpg. Keep in mind that this won't capture GIF and PNG images.  

14. [data-filetype="image"] Selector

a[data-filetype="image"] {
   color: red;
}

How do we compensate for all of the various image types? Well, we could create multiple selectors, such as:

a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
   color: red;
}

But that's a pain, and it's inefficient. Another possible solution is to use custom attributes. What if we added our own data-filetype attribute to each anchor that links to an image? html code : <a href="path/to/image.jpg" data-filetype="image"> Image Link </a> Then, with that hook in place, we can use a standard attributes selector to target only those anchors.

a[data-filetype="image"] {
   color: red;
}

 

15.  [attribute~="value"] Selector

a[data-info~="external"] {
   color: red;
}
 
a[data-info~="image"] {
   border: 1px solid black;
}

Here's a special one that'll impress your friends. Not too many people know about this trick. The tilde (~) symbol allows us to target an attribute which has a space-separated list of values. Going along with our custom attribute from number 15, above, we could create a data-info attribute, which can receive a space-separated list of anything we need to make note of. In this case, we'll make note of external links and links to images—just for the example. html code;"<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a> With that markup in place, now we can target any tags that have either of those values, by using the ~ attributes selector trick.

/* Target data-info attr that contains the value "external" */
a[data-info~="external"] {
   color: red;
}
 
/* And which contain the value "image" */
a[data-info~="image"] {
  border: 1px solid black;
}

Read More : Explaining HTML and Introduction Read More : HTML 5 Tutorial for Beginners   Reference Link:  https://hpkingdom.com