Thursday, February 21, 2019

How to use CSS Selectors and Combinators? CSS Tutorial 02

                2 comments   

css selectors and combinators

In this CSS tutorial, we will discuss a different type of CSS selectors, combinators, and property value types. After the completion of this article, your concept will be clear about these CSS properties because there have been given a very simple description and syntax with an example.


  1. CSS Tutorial: Selectors
  2. CSS Tutorial: Combinators
  3. CSS Tutorial: Property Value Types

CSS Tutorial: Selectors

The role of the selector in CSS syntax is important. Whatever style you want to apply on the HTML element you can define it by selectors. It is a selector which make CSS so powerful and efficient language. CSS selectors provide you ability to select any element of HTML and change its presentation. Before discussing more on the selectors, let's first understand the syntax of CSS.

The syntax of CSS selector

Selector
         {
          Property:Value;
        }

An example of CSS selector

<h1> This is an example of a selector. </h1>
      h1
       {
        color: green;
      }

The above CSS Code will give the below output.

                    This is an example of a selector.

In the above example, h1 is a selector. This selector is applied to HTML h1 tag. Such type of selectors is called element type selectors.

Here, the HTML tag has been used as a selector. After the selector, the color property in curly brackets and its value has been defined. This property has changed the text of heading into green color.

Types of Selectors

There are many types of selectors provided by CSS that you can work more accurately by using. The details about these selectors are given below.

Element Type Selectors

Such selectors apply to any HTML tag. The name of this selector is the name of the same HTML tag. When you need to apply a style to a particular HTML tag, you can use such selector.

How to use CSS selectors and combinators? CSS Tutorial 02

 An example of this has given below. 

<!DOCTYPE html>
<html>
    <head>
        <title> Element Type Selector Example </title>
        <style>
            p
            {
            color: blue;
            }
        </style>
    </head>
    <body>
        <p> This is an example of element type selector. </p>
    </body>
</html>


The above script will generate the below output.

css element type selector

 

Universal Selector

Universal selector is represented by star (*). The styles defined in this selector are applied to all HTML elements but remember this works only when the style is not defined separately for any element.

If an element is defined differently for an element or it uses the element inline style sheet, then no effect of this selector will be on that element. 
An example has given below.


<!DOCTYPE html>
<html>
<head>
    <title> Universal Selector Example </title>
    <style>
        * {
        color: red;
        background: yellow;      
        }
    </style>
</head>
<body>
    <h2> This is an example of Universal Selector </h2>
    <p>
        Universal Selector is used to implement style on all HTML element <br> but if you want to make change you can define inline CSS seperatly.
    </p>  
</body>
</html>


So universal selector h1 and p will apply on both tags and their color will be red. 

 This script will generate the below output.
CSS universal selector

 

Sub-element Selector

If you want to apply CSS on an element which comes under another element then you can use sub-element selector.

First of all, you give the name of the main element, after giving space and type the name of the sub-element on which you want to apply the styles.

An example of this has given below.


<!DOCTYPE html>
<html>
    <head>
        <title> Sub Element Selector Example </title>
        <style>
            p span {
            color: red;
            }
        </style>
        </head>
        <body>
            <p>This is a <span> Sub Element Selector </span>example .</p>
    </body>
</html>


In this example, the style is applied to main element on <p> and sub-element <span> tag. The text inside the span tag will be the red color. 

 This script will generate the below output.
CSS sub element selector

   

Class Selectors

Every HTML element defines a class attribute. The class of elements is defined by this attribute. You can apply styles on the basis of the class attribute.

For this, you write the name of the class as the selector by applying dot (.) operator. All the defined styles will apply to those elements which belong to that class.

Let's understand this with an example.

<!DOCTYPE html>
<html>
    <head>
    <title> Class Selector Example </title>
        <style>
            .mbhClass {
            color: green;
            }
        </style>
    </head>
    <body>
        <h1> Main Heading of Article </h1>
        <h2 class = "mbhClass"> Sub Heading of Article </h2>
        <p> This is a first paragraph of the article </p>
        <p class = "mbhClass"> This is the a second paragraph of the article </p>
    </body>
</html>


The above script will generate the below output.
CSS class selector

 

ID Selectors

Just like class attribute, you can also define styles for a particular ID. The HTML elements that match with this ID, styles applied to them. You use symbol hash (#) to apply styles to any ID.

An example of this has given below.


<!DOCTYPE html>
<html>
    <head>
    <title> ID Selector Example </title>
    <style>
        #mbhIDH1 {
            color: red;
        }
        #mbhIDH2 {
            color: green;
        }
        #mbhIDP1{
            color: blue;
        }
        #mbhIDP2{
            color: orange;
        }
    </style>
    </head>
    <body>
        <h1 id="mbhIDH1">ID SELECTOR TUTORIAL</h1>
        <h1 id="mbhIDH2">ID Selector in CSS</h1>
        <p id="mbhIDP1"> Hello, This is a paragraph-1. We are learning ID <br> selectore in CSS
        <p id = "mbhIDP2"> Hello, This is a paragraph-2. We are <br>learning CSS in simple and easy way. </p>
    </body>
</html>


The above code will generate the below output.



CSS id selector

 

Attribute Selectors

Just like HTML tags, you can apply styles using the HTML attributes. These selectors are used for the form tags of sub-elements.

You can target an attribute by excluding other attributes according to the input type. 

An example has given below.


<!DOCTYPE html>
<html>
    <head>
        <title> Attribute Selector Example </title>
        <style>
            a[target]{
                background-color: green;
                color: white;
                font-weight: bold;              
            }                            }
        </style>
    </head>
    <body>
        <a href="https://www.google.com">Google</a><br><br>
        <a href="https://www.mybloghelp.com" target="_blank">MyBlogHelp</a><br><br>
        <a href="https://www.yahoo.com" target="_top">Yahoo</a>
    </body>
</html> 
The above CSS style will only apply to the anchor tag (a) in which the attribute is a target. 

This code will generate the below output.
CSS attribute selector

 

Group Selectors

You can also use more than one selector at the same time. For this, you separate all the selectors from the comma. The styles defined in the curly brackets apply to all selectors.

Let's understand this with an example.


<!DOCTYPE html>
<html>
    <head>
        <title> Group Selector Example </title>
        <style>
            h1, h2, p {
            color: red;
            }
        </style>
    </head>
    <body>
        <h1> CSS Group Selectors in </h1>
        <h2> How to use Group Selectors in CSS? </h2>
        <p>
            CSS is Cascading Style Sheet. It is very powerful for every web designer.<br> Using CSS, web designer designs attractive webpage or website.
        </P>
    </body>
</html> 


The above code will generate the below output.


CSS group selector

 

CSS Tutorial: Combinators

So far you have learned about the selectors and you have even used them but you used the only single selector. However, any element can easily be designed by single selector but most of the times element can be inside many parent elements or that element can be at a position that can’t be targeted by a single selector.

For example, you want to design the paragraph which is defined in a particular <div>. You can use a single paragraph selector for this, but by doing this, the style applies to all paragraphs of the webpage.

In this case, you have to use div and paragraph selector to combine it by a combinator. By which you will tell the interpreter that the paragraph is the child of the particular <div> element and you want to design it.

CSS combinators are used to define relationships between two selectors. These are defined as special symbols among selectors. As the name suggests, combinators combine selectors and make a new selector.

If you want to apply a style to special elements, then target both selectors by id or class so that all the div and paragraphs of the webpage are not targeted.

There are four types of combinators available in CSS(cascading style sheet). These are also called multiple selectors because they combine more than one CSS selectors.
  • Descendent Selector: It is denoted by “space”.
  • Child Selector: This selector is denoted by “>”
  • Adjacent Sibling Selector: This selector is represented by “+”
  • General Sibling Selector: For this selector “ ~ ” symbol is used.
Let's try to learn about these combinators in details.

Descendant Selector

This combinator is most commonly used. It may be that you have used it many times so far, but you do not know much about it.

The descendant selector is used to target an element that is the child of a parent element. It does not matter the child element is at how many a deep level.

For example, if an unordered list is defined in a div element, to target the list elements, you define the li element by giving the space after the div element in the CSS. By doing this, all li elements in that list are targeted.

However <li> elements are defined within the <ul> list element, but you do not need to define ul in css because, as I said, it does not matter what level of child element it is at.

The descendant selector's general syntax has given below.

parent-element descendent-element (child at any level)
                                                                      {
                                                                      property: value;
                                                                      }

As you can see in the above syntax, the descendent element is defined by giving space after the parent element. Descendent means that it is a child element. It does not matter how many other parent elements have been defined within it.

This selector has been explained by the below example.


<!DOCTYPE html>
<html>
    <head>
        <style>
            #mbhDiv li
            {
               color: white;
               background: red;
               font-weight: bold;
            }
        </style>
    </head>
    <body id = "mbhDiv">
        <div>
            <ul>
                <li> This is the  First Item </li>
                <li> This is the  Second Item </li>
                <li> This is the  Third Item </li>
            </ul>
        </div>
    </body>
</html> 
This example will produce the below output.
CSS descendant combinator

 

Child Selector

The child selector is used to select such elements that are the immediate child of a parent element. Here immediate child means an element that has been defined within that parent element but not inside any other parent element.

For example, if you want to target <span> elements of a <div> which is the child of the div but have not been defined within any other parent, you can use this selector for it.

The general syntax of the child selector is given below.

    parent_element> child_element (Not inside any other parent element)
                                               {
                                                property: value;
                                               }

As you can see in the above syntax, the immediate child has been defined by adding greater than “>” symbol after the parent element. 

This selector is explained by the below example.


<!DOCTYPE html>
<html>
    <head>
        <style>
            #mbhDiv> span
                {
                background: lime;
                color: red;
                font-weight: bold;
                }
        </style>
    </head>
    <body>
        <div id = "mbhDiv">
            <span> span text </span><br><br>
            <span> span text </span>
            <p> <span> This span is not immediate. It is imediate to p tag </span> </p>
            <span> span text </span>
        </div>
    </body>
</html>


This example will produce the below output.
CSS child combinator

 

Adjacent Sibling Selector

Adjacent sibling selector is used to select adjacent siblings of a specified element.

Any two elements are called adjacent when they come before or after each other. That is, when two elements are adjacent to each other, then they are called adjacent.

Any two elements are then called sibling when their parent element is same. For example, there are sibling elements <div>, <p> and <table> defined inside <body> tag.

That is, in a simple language, the adjacent sibling selector selects an element which is also adjacent to the given element and its sibling (same parent) too.

The general syntax of this selector has given below.

            specified-element + adjacent-sibling-element
                                                                       {
                                                                        property: value;
                                                                       }

As you can see in the above syntax, the adjacent sibling selector is defined in the form of a plus (+) symbol between an element and its adjacent sibling element.

 This selector has explained in the below example.


<!DOCTYPE html>
<html>
    <head>
        <style>
        p + span
                {
                 background: yellow;
                }
        </style>
    </head>
    <body>
        <div id = "mbhDiv">
            <p> This is a paragraph1 </p>
            <span> This span is a adjacent sibling of above paragraph1 </span><br>
            <span> This span is is not adjacent sibling of above paragraph1 </span>
        </div>
    </body>
</html> 


The above example will produce the below output.
CSS adjacent sibling combinator

 

General Sibling Selector

The general sibling selector selects all the elements which are the siblings of the specified element. The general syntax of this selector is given below.

      specified_element ~ general_sibling_elements
                                                                     {
                                                                      property: value;
                                                                     }

As you can see in the above syntax, the general sibling selector is defined as the tilde (~) symbol. This selector has been explained by the below example.  


<!DOCTYPE html>
<html>
<head>
    <style>
        p ~ span
            {
             background-color: yellow;
            }
    </style>
</head>
<body>
    <div>
        <p> This is a paragraph1 </p>
        <span> This span is adjacent sibling of above paragraph1 </span><br>
        <span> This span is sibling of above paragraph1 </span><br>
        <span> This span is also sibling of above paragraph1 </span>
    </div>
</body>
</html> 
The above example will produce the below output.
CSS General sibling combinator

 

CSS Tutorial: Property Value Types

Whenever a CSS property defines, its value is also defined with it. Different types of values are defined for different properties.

For example, numeric values are defined for width and height properties, and color name and hex value are used for color, background, etc. properties.

There are many value types available in CSS. They have been divided into four main categories.
  • Numeric Value types - px, em, cm, pt etc.
  • Percentage value type-values to be defined as Percentage
  • Color value type - Color name, RGB, RGBA, and hexadecimal color value
  • Function value types - url (), rotate (), translate () etc.
Many of these categories are available in many Value types of CSS. Next, we are going to tell you about some types of value types in every category that you will use frequently.

CSS Numerical Value Types

There are many properties available in CSS, whose values are numeric (in the form of numbers). A list of similar properties is given below whose value is defined numerically.
  • width
  • height
  • margin
  • padding
  • font-size etc.
Many types of properties in CSS can be defined as numeric values. Available numeric values types in CSS are explained below in detail.
  • px - This type is used to define in value in pixels. The numeric value, which is defined with this type, elements are effective by the same pixels.  
  • em - This is a relative value type. This value type is defined in the relation of current value. For example, if you define a font size of 2em, then this would mean the current font size would be twice the size. If you want to change in pixel it will be em=16px.
  • cm - This type of property is used to define value in centimeter.
  • pt - This type of property is used to define value in points. It is mostly used for print media types.
  • mm - It is used to define the value of type property in millimeter.
An example of the lowercase CSS numeric value type has given below.


<!DOCTYPE html>
<html>
    <head>
        <style>
            h1, p {
                margin-left: 20px;
                font-size: 20pt;
                }
        </style>
    </head>
    <body>
        <h1> CSS Numeric Types Example </h1>
        <p> This is a paragraph </p>
    </body>
</html> 
The above example will produce the below output.
CSS numeric value type

 

Percentage Value Type in CSS 

The properties which you define in numeric, most of them you can define in the value of percentages. The percentage value is appropriate in those situations when you want to change the screen size.

The elements whose values are defined in percentage, the value of screen change according to the screen size. But when you use other numeric types, the values of elements will be fixed.

For example, if you want to define the width 50% of a paragraph, that paragraph will display in 50% width on the screen.

The list of the few properties has given below which can be defined in the percentage value.
  • margin
  • padding
  • font-size
  • border
  • color
  • width
  • height
The example of Percentage value type has given below.


<!DOCTYPE html>
<html>
    <head>
        <style>
            p
            {
              width: 20%;
            }
        </style>
    </head>
    <body>
        <h1> Percentage Value Type Example </h1>
        <p> The width of this paragraph is set using percentage(%) value type </p>
    </body>
</html> 


The above example will produce the below output.
CSS percent value type

 

CSS Color Value Types

There are many properties in CSS whose values are defined as color. Such as color, background color, etc. There are four main color value types available in CSS. You can define the color value by these.
  • Name - To define the color value, you can define the name of the color directly. Such as red, blue, green, and lime, etc.
  • Hex Value - The hex value of a color can also define the value of the property. Such as #ccc, #fff, #547823, and #012537 etc.
  • RGB - The syntax of RGB is property: rgb(red, green, blue). You can also define the color as different values of red, green and blue colors. Such as (0,0,255), (0,255,255), (255,255,255), and (50,100,200) etc.
  • RGBA – The syntax of RGBA is property: rgba(red, green, blue, alpha). This is an extension of RGB with alpha where alpha defines the opacity of color value. The range of alpha value is between 0.0(fully transparent) to 1.0(full opacity). Such as (23, 50, 95, 0.6).
An example of color value types has given below.


<!DOCTYPE html>
<html>
    <head>
        <style>
               body{
                   background-color: green;
                }
                h1{
                  color: #f07c82;
                }
                p{
                  color: rgb(255,255,255);
                }
                span{
                  color: rgba(255, 50, 95, 0.8);
                }
        </style>
    </head>
    <body>
        <h1> Color Value Types Example </h1>
        <p> Background is set using color name, heading color is set using hex value of color<br> and paragraph color is using rgb function of color property. </p>
        <span>This is text of span for using rgba function</span>
    </body>
</html>
The above example will produce the below output.
CSS color value types

 

CSS Function Value Types

There are several such properties in CSS whose values are defined as a function. For example, if you want to include a background image on your webpage, you define the function url() as the value of the background property and pass the address of that image in it.

Similarly, the value of the transform property is defined to rotate (), translate (), etc. as functions. In addition, the value of background-color property can be defined rgba() and hsla() as functions.

An example of the function value type has given below.


<!DOCTYPE html>
<html>
  <head>
        <style>
            body{
                background: url(images/seashore.jpeg);
                color:red;
                }
        </style>
  </head>
  <body>
     <h1> Function Value Type Example </h1>
     <p> Background of this webpage is added using url() function value of background property. </p>
    </body>
</html>
The above example will produce the below output. 
CSS function value type




         <<- PREVIOUS                                                                NEXT ->>






2 comments:

Thank you for reading this post. Please do not enter any spam link in the comment box.

Followers

Contact Us

Name

Email *

Message *

About MyBlogHelp

Most of the posts, we share on this blog related to Affiliate Marketing, Organic Lead Generation, Digital Marketing, Social Media Marketing, Make Money Online, SEO, and web design.