Skip to main content

CSS Selectors

CSS Selectors

>As I told you in the last article that CSS selector is used to determine which html element of your web page you want to style.In this post, you'll get to know about a lot of CSS selectors which you can use while styling your web page.I have provided you a list with a brief description of the selector.If you want to know the format of using a CSS selector then read about CSS Syntax here then you can read and understand the list easily.



Selector Example Example description CSS
.class .intro Selects all elements with class="intro" 1
#id #firstname Selects the element with id="firstname" 1
* * Selects all elements 2
element p Selects all <p> elements 1
element,element div, p Selects all <div> elements and all <p> elements 1
element element div p Selects all <p> elements inside <div> elements 1
element>element div > p Selects all <p> elements where the parent is a <div> element 2
element+element div + p Selects all <p> elements that are placed immediately after <div> elements 2
element1~element2 p ~ ul Selects every <ul> element that are preceded by a <p> element 3
[attribute] [target] Selects all elements with a target attribute 2
[attribute=value] [target=_blank] Selects all elements with target="_blank" 2
[attribute~=value] [title~=flower] Selects all elements with a title attribute containing the word "flower" 2
[attribute|=value] [lang|=en] Selects all elements with a lang attribute value starting with "en" 2
[attribute^=value] a[href^="https"] Selects every <a> element whose href attribute value begins with "https" 3
[attribute$=value] a[href$=".pdf"] Selects every <a> element whose href attribute value ends with ".pdf" 3
[attribute*=value] a[href*="w3schools"] Selects every <a> element whose href attribute value contains the substring "w3schools" 3
:active a:active Selects the active link 1
::after p::after Insert content after every <p> element 2
::before p::before Insert content before the content of every <p> element 2
:checked input:checked Selects every checked <input> element 3
:disabled input:disabled Selects every disabled <input> element 3
:empty p:empty Selects every <p> element that has no children (including text nodes) 3
:enabled input:enabled Selects every enabled <input> element 3
:first-child p:first-child Selects every <p> element that is the first child of its parent 2
::first-letter p::first-letter Selects the first letter of every <p> element 1
::first-line p::first-line Selects the first line of every <p> element 1
:first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent 3
:focus input:focus Selects the input element which has focus 2
:hover a:hover Selects links on mouse over 1
:in-range input:in-range Selects input elements with a value within a specified range 3
:invalid input:invalid Selects all input elemets with an invalid value 3
:lang(language) p:lang(it) Selects every <p> element with a lang attribute equal to "it" (Italian) 2
:last-child p:last-child Selects every <p> element that is the last child of its parent 3
:last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent 3
:link a:link Selects all unvisited links 1
:not(selector) :not(p) Selects every element that is not a <p> element 3
:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent 3
:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child 3
:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last child 3
:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent 3
:only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent 3
:only-child p:only-child Selects every <p> element that is the only child of its parent 3
:optional input:optional Selects input elements with no "required" attribute 3
:out-of-range input:out-of-range Selects input elements with a value outside a specified range 3
:read-only input:read-only Selects input elements with the "readonly" attribute specified 3
:read-write input:read-write Selects input elements with the "readonly" attribute NOT specified 3
:required input:required Selects input elements with the "required" attribute specified 3
:root :root Selects the document's root element 3
::selection ::selection Selects the portion of an element that is selected by a user
:target #news:target Selects the current active #news element (clicked on a URL containing that anchor name) 3
:valid input:valid Selects all input elements with a valid value 3
:visited a:visited Selects all visited links 1
Labels:

Comments

Post a Comment

Comment on articles for more info.

Popular posts from this blog

Image Search Engine Using Python

Images provide a lot more information than audio or text. Image processing is the prime field of research for robotics as well as search engines. In this article we will explore the concept of finding similarity between digital images using python. Then we will use our program to find top 10 search results inside a dataset of images for a given picture. It won't be as good as google's search engine because of the technique we will be using to find similarity between images. But what we are going to make will be pretty cool. So lets start. Setting up the Environment Our Algorithm How the code looks Lets build the GUI Additional Techniques Setting up the Environment The code we are going to write requires a few tools which we need to install first. I will try to be as precise as i can and if you get stuck into installing some tool then you can drop a comment below and i will help you sort out the problem. So here are the tools and the steps to install ...
18 comments
Read more

Understanding Python Decorators

If you have ever wondered what those @something mean above a python function or method then you are going to have your answers now. This @something line of code is actually called a decorator. I have red from various articles about them but some of them were not able to clarify the concept of a decorator and what we can achieve with them. So in this post we'll learn a lot about python decorators. Here is a list of topics we'll be covering. What is python decorator Understanding the concept Multiple decorators on same function class method decorator Where can we use decorators What is python decorator A python decorator is nothing but a function which accepts your given function as a parameter and returns a replacement function. So its like something this def decorator(your_func): def replacement(your_func_args): #do some other work return replacement @decorator your_func(your_func_args): #your_func code Now when your_func gets called then...
1 comment
Read more

Cordova viewport problem solved

Include the viewport settings in Cordova If you are facing the auto zooming problem of cordova then go read on the full article. Cordova actually ignores the viewport meta tag which causes the pixel density problem. So we need to tell cordova that viewport tag is equally important as other tags. To do this, we need to add some code to a file which is specify in the article. Corodva messes with pixels If you are using the latest cordova version or creating the cordova app for latest android versions then you may have faced the zoom malfunctioning.I also faced it when creating an app. Many of you may have already searched the web and found the answer of changing the meta tag attributes to get it working. But adding target-densitydpi=medium-dpi does not solve the problem for latest android versions. It may work for gingerbread but not for kitkat and others. So the final solution which i found was one of the stackexchange answer but rarely found. So i am gonna two things here, i ...
5 comments
Read more