So in this blog, we’re going to learn that How to Use jQuery Filters to Specify Your Element Selections?
So let’s go ahead and do that for first in index.html, with help of style.css & main.js.
In this blog, I am creating a page using HTML, CSS & jQuery after that define Moving Elements. So, Let’s create an index.html, main.js & style.css below-
Are right let’s create our first animation that’s not actually built in any nation but a custom one. And to get started with custom animations we’re just going to create a very simple one and this blog-
We can set style using attribute or its value.
Syntax: –
Selector [attribute] { CSS ;}
Ex: –
div [id] { color: red; }
Syntax: –
Selector [attribute = “value”] { CSS }
Ex: –
div[id=“data”] { color: red; }
Syntax: –
[attribute ~= “value”] { CSS }
Ex:-
[class ~= “game”] { color: red; }
Syntax: –
[attribute |= “value”] { CSS }
Ex:-
[class |= “game”] {color: red;}
The value must be a whole word.
Ex: –
“game” or “game-super”
Syntax: –
[attribute ^= “value”] { CSS }
Ex:-
[class ^= “game”] {color: red;}
It is not necessary that the value should be a whole word.
Syntax: –
[attribute $= “value”] { CSS }
Ex:-
[class $= “game”] {color: red;}
It is not necessary that the value should be a whole word.
There are five types of Selector in CSS.
<html>
<head>
<style>
#id_selector {
color: red; font-size: 60px;
}
</style>
</head>
<body>
<p id="id_selector">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
<html>
<head>
<style>
.red {color: #FF0000; font-size: 60px;}
</style>
</head>
<body>
<h2 class="red">I am Heading</h2>
<p class ="red">I am first paragraph</p>
<p>I am second paragraph</p>
</body>
</html>
<html>
<head>
<style>
p.red {color: #FF0000; font-size: 60px;}
</style>
</head>
<body>
<h2 class="red">I am Heading</h2>
<p class ="red">I am first paragraph</p>
<p>I am second paragraph</p>
</body>
</html>
<html>
<head>
<style>
p.red {color: #FF0000;}
p.look{font-size: 60px;}
.algn{text-align: center;}
</style>
</head>
<body>
<h2 class="algn">I am Heading</h2>
<p class ="red look">I am first paragraph</p>
<p class="red algn">I am second paragraph</p>
</body>
</html>
z-index property is used to set the layer of elements. We can set this property to auto (default) and number. It works only with position property value: fixed, relative, absolute.
The element which has a higher number appears at the top.
Ex: –
img {
position: fixed;
z-index: 565;
}
In This tutorial, I am going to explain that how to How to use the position property in CSS to align elements? Below Property to uses in align elements-
Length (cm, px, %)
When we set static position for an element then it is not positioned in any special way, it is always positioned according to the normal flow of the page. left, right, top and bottom property won’t work with static position.
Ex: –
h1 {
position: static;
border: 5px solid red;
}
h1 {
position: static;
border: 5px solid red;
left: 50px;
}
When we set fixed position for an element it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.
img {
position: fixed;
right: 0;
top: 50%;
border: 3px solid red;
}
When we set relative position for an element, elements positioned to its normal flow.
h1 {
position: relative;
left: 50px;
border: 3px solid red;
}
When we set absolute position for an element, element is positioned to the nearest positioned ancestor. If there is no positioned ancestor then it follow the normal position according to browser.
div {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid red;
}
These properties are used to position an element.
We can not use any of these properties without setting up position property.
This property is used to define how an element should display. Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.
| inline | table-row-group |
| block | table-caption |
| flex | table-column-group |
| inline-block | table-header-group |
| inline-flex | table-footer-group |
| inline-table | table-cell |
| list-item | table-column |
| run-in | table-row |
| table | none |
A Block-level element always starts on a new line and takes up the full width available.
Ex: –
<div>
<h1>
<p>
An inline element does not start on a new line and only takes up as much width as necessary.
Ex: –
<span>
<a>
<img>
•inline – When we set this value, the element does not start on a new line and only takes up as much width as necessary (we can’t set width/height it won’t work)
•block – When we set this value, element always starts on a new line and takes up the full width available (we can set width/height)
•inline-block – It is combination of inline and block value. It doesn’t start on new line but we can set width and height.
•none – The element will not be displayed at all (has no effect on layout)
•flex – Displays an element as a block-level flex container.
•inline-flex – Displays an element as an inline-level flex container.
•inline-table – The element is displayed as an inline-level table
•run-in – Displays an element as either block or inline, depending on context
A tag is a bit of text that acts as a point demarcation. To create a tag, HTML gives certain characters special meaning: the angle brackets < and >.
Putting characters within angle brackets creates a tag.
<h1> A heading </h1>Start tag or opening tag and End tag or closing tag. An end tag always matches a start tag, except that it has an extra forward slash after the opening angle bracket.
<h1> A heading </h1>Container Tag – Which has opening and closing Tag.
Ex-<html> ……. </html>
<head> ……. </head>
<body> ……. </body>
Empty Tag – which has only opening tag.
Ex: –
<br>
<area>
<base>
<hr>
<img>
<input>The combination of a start and end tags define an element. Everything between the two tags is referred to as the contents of the element.
<h1> A heading </h1>