I would like to repeat div class several times without having to code it, and being able to target each element individually with css. Possible?
Like instead of:
<div
class="design">design</div>
<div
class="design1">design</div>
<div
class="design2">design</div>
<div
class="design3">design</div>
I would have:
<div
class="design">design</div>
X4
Is it better to use span class and is this possible to multiply too?
If I understood correctly what you want, then I think you can use nth-of-type(n). Although you'll need to repeat code in CSS... (you can avoid repeat HTML code by using Javascript, but since you didn't tagged it and not mentioned nothing about it, I think you want something in HTML and CSS only)
"The :nth-of-type() CSS pseudo-class matches elements of a given type, based on their position among a group of siblings."
.design:nth-of-type(1){
color: purple
}
.design:nth-of-type(2){
color: blue
}
.design:nth-of-type(3){
color: red
}
.design:nth-of-type(4){
color: green
}
<div class="design">design</div>
<div class="design">design</div>
<div class="design">design</div>
<div class="design">design</div>
And about span, it depends on what you are going to do, div is naturally display:block, while span is display:inline
further read about nth-of-type: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type
You could use javascript to accomplish this if you put it in a container.
<div id="div_container"></div>
<script>
let output = "";
for(i = 0; i<4; i++){
output += "<div class='design'>design</div>"
}
document.getElementById('div_container').innerHTML = output;
</script>
You can further style it using .design:nth-of-type(1) .design:nth-of-type(2) etc.
This wouldn't make sense for 4 instances of the div, but more than 10 would be easier and scales to large numbers, simply change 'i' and create the div container.
EDIT:
Define output prior to loop
In order to output your HTML without rewriting it each time, you will need to use one of the following:
An actual programming language (Such as PHP)
A framework/library (such as React)
A preprocessor/templating system (such as Haml or Pug)
Using PHP is simple enough, if you have PHP installed on your webhost (you almost certainly do).
For instance, instead of this:
index.html:
<div class="design design-0">Design</div>
<div class="design design-1">Design</div>
<div class="design design-2">Design</div>
<div class="design design-3">Design</div>
You could have this:
index.php
<?php for( $i = 0; $i < 4; $i++ ){
echo "<div class='design design-$i'>Design</div>";
} ?>
Or check out this Pug example: https://codepen.io/xhynk/pen/OJPvPMX if you would rather use a preprocessor.
For the CSS though, as #Calvin Nunes said, you can make use of the :nth-of-type() selector or even the Adjacent Sibling Combinator - though these largely make the need for the design-x type classes unnecessary, unless you have other reasons to include them.
If i understood correctly, I'll keep the record from the post upstairs, and no, you can't do it without making it repeat 4 times, each div or the group of divs in this case NEEDS something for you to work with 'em.
Related
Is there any way to prevent me from clicking on an anchor to take me to the top of the page?
this is my code:
<div class="slider">
<div class="slides">
<div id="slide-1">1</div>
<div id="slide-2">2</div>
<div id="slide-3">3</div>
<div id="slide-4">4</div>
<div id="slide-5">5</div>
</div>
1
2
3
4
5
A) If I understood you well, you can do it with pure CSS.
a[href*="#slide"] {
pointer-events: none;
}
B) After reading what you wrote in the comments, you can use what PHPglue suggested.
document.querySelectorAll('a[href*="#slide"]')
.forEach($a => $a.onclick = e => {
e.preventDefault() // don't go
console.log('but do your things')
})
Hope this help :)
As far i know you cannot avoid it its connected to the fact that when you get to page its need to be rendered.
Before that, this id just do not exist.
So no way to remove it.
You can only try to speed this up a bit.
Just try to ensure that your page is loading fast.
You have your syntax confused, but it's easy to understand how that happened... You can do internal page links that will allow you to jump from one spot (or section) to another inside the same page, or even to a specific paragraph inside another page. The problem with your sample code is that you are using HTML syntax to link to CSS.
<div id="slide-1">1</div>
...
1
It's true that you use a # (hash tag) in your <a> tag. So, using 1 should, theoretically, work. And yes, you can use an id of the same name to identify where the link should take you. However - you can not use the name for anything else on the page. It must be unique and specific to avoid any confusion. Since your <div> tag(s) have the same identifier as your anchor tags, and since you are using the CSS selector id, the browser is ignoring your <div id= statement because it cannot find the #slide-1 style in your CSS file.
The easiest way to fix this is to change your code to:
<div id="css_style" name="slide-1">1</div>
...
1
Doing so will allow the <div> to retain the intended styles and connect the link to the anchor on the page. Just don't give your CSS style the same name, use something else.
W3C Links Documentation
How to assign values or string to p tag through CSS?
I am trying like this, why I am doing like this because I come from Android programming.
HTML file:
<p> </p>
CSS file:
p{
text:"today"
}
result should= "today" in browser
So please help me.
Although I can't see a reason why you can't just add the text to the HTML file, I will still answer your question.
There is no way to add text inside of the HTML tag. The only way that you can add text around HTML is through pseudo elements like the following:
p:before{
content: "today";
color: black;
}
This is not recommended however, due to the fact that the text won't actually exist in the html and will need to be styled to display properly.
A much better solution would be to use javascript
<script>
document.getElementById('todayTag').innerHTML = "today";
</script>
The 'todayTag' refers to an ID that will be placed on the p tag.
1)It is not possible in css,
2)Use jQuery or
$("p").html("today");
3)Use JavaScript
document.getElementsByTagName("P")[0].innerHTML = "Today";
note [0] is the index
You cannot do that via css alone, use javascript for that instead.
document.getElementById("demo").innerHTML = "text";
<p id="demo">
</p>
I have a HTML file in the below format :-
<div class="container">
<div class="hello"><p>1</p></div>
<div class="goodbye">2</div>
<div class="hello"><p>3</p></div>
<div class="goodbye">4</div>
</div>
Please recommend me a program which could remove a particular div tag by its class name and save the output file as below :-
<div class="container">
<div class="goodbye">2</div>
<div class="goodbye">4</div>
</div>
The whole division along with its internal tags should be removed. I have used jQuery, but it does not affect the source code.
Thanks in advance.
You can use .remove():
Remove the set of matched elements from the DOM.
$('.container .hello').remove();
Side note: You can use .find() to speed up above selector:
$('.container').find('.hello').remove();
You can get the element having class hello within container and call .remove()
Live Demo
$('.container .hello').remove();
Similar to .empty(), the .remove() method takes elements out of the
DOM. Use .remove() when you want to remove the element itself, as well
as everything inside it. In addition to the elements themselves, all
bound events and jQuery data associated with the elements are removed.
To remove the elements without removing data and events, use .detach(), jQuery docs
So, nobody actually seemed to read what OP asked for.
Here's an answer for a JavaScript Regular Expression, very dirty and unflexible, but matching your needs.
<div class=.(\w*)?.><(.*)</div>
Still you may run into problems, because I don't know any editor actually using JavaScript RegEx.
Basically, everything about problems you might run into has been already said in this famous thread: RegEx match open tags except XHTML self-contained tags
This question already has answers here:
What's the difference between an id and a class?
(17 answers)
Closed 9 years ago.
I am learning HTML. Can someone please tell me what is the difference between class and id and when to use one over the other? They seem to do the same thing
<!DOCTYPE HTML>
<html>
<head>
<style>
#mycolor1 {color: red;}
.mycolor2 {color: red;}
</style>
</head>
<body>
<div id="mycolor1"> hello world </div>
<div class="mycolor2"> hello world </div>
</body>
</html>
They do not do the same thing.id is used to target a specific element, classname can be used to target multiple elements.
Example:
<div id="mycolor1" class="mycolor2"> hello world </div>
<div class="mycolor2"> hello world2 </div>
<div class="mycolor2"> hello world3 </div>
Now, you can refer all the divs with classname mycolor2 at once using
.mycolor2{ color: red } //for example - in css
This would set all nodes with class mycolor2 to red.
However, if you want to set specifically mycolor1 to blue , you can target it specifically like this:
#mycolor1{ color: blue; }
Read the spec for the attributes and for CSS.
id must be unique. class does not have to be
id has higher (highest!) specificity in CSS
Elements can have multiple non-ordinal classes (separated by spaces), but only one id
It is faster to select an element by it's ID when querying the DOM
id can be used as an anchor target (using the fragment of the request) for any element. name only works with anchors (<a>)
Classes should be used when you have multiple similar elements.
Ex: Many div's displaying song lyrics, you could assign them a class of lyrics since they are all similar.
ID's must be unique! They are used to target specific elements
Ex: An input for a users email could have the ID txtEmail -- No other element should have this ID.
The object itself will not change. The main difference between these 2 keyword is the use:
The ID is usually single in the page
The class can have one or many occurences
In the CSS or Javascript files:
The ID will be accessed by the character #
The class will be accessed by the character .
To put it simnply: id is unique to just one element in the whole HTML document, but class can be added to numerous elements.
Also, ID properties have priority over class properties.
ids and classes are especially useful if you plan on using javascript or any of its frameworks.
class is used when u want to set properties for a group of elements, but id can be set for only one element.
ID's must be unique (only be given to one element in the DOM at a time), whereas classes don't have to be. You've already discovered the CSS . class and # ID prefixes, so that's pretty much it.
ID provides a unique indentifier for the element, in case you want to manipulate it in JavaScript. The class attribute can be used to treat a group of HTML elements the same, particularly in regards to fonts, colors and other style properties...
ID is suitable for the elements which appears only once
Like
Logo sidebar container
And Class is suitable for the elements which has same UI but they can be appear more than once.
Like
.feed in the #feeds Container
the Id selector is used when referring to a single unique element.
The Class selector referrers a group of elements.
For example, if you have a multiple buttons that look the same, you should use class="mybutton" to have consistent styling.
In terms of performance:
CSS selectors are matched from right to left.
Therefore, .myClass should be "faster" than #myID because it misses out testing.
The performance speed is negligible for normally sized pages and you will probably never notice a difference so it's mostly just about convention.
Here is more info on why css is browsers match css selectors from right to left
I have this elements in html:
<div id="element0div0">
div 0
</div>
<div id="element1div1">
div 1
</div>
<div id="element2div2">
div 2
</div>
can i use something like regex to apply css to element like element{n}div{n}?
There's no regular expression to differentiate between numbers and letters, but you can definitely approach a solution using:
div[id^=element][id*=div] {
/* css */
}
This has flaws in that this will match the following (and more) id strings:
elementdiv
elementSomeOtherStringdiv
elementdivSomeOtherString
I'd suggest, given the nature of your question, that it'd be far wiser to simply use a common class-name to all the elements to which you wish to apply a common style.
References:
CSS attribute-selectors.
Yes you can but you must use JavaScript.
Using jQuery :
$('div').filter(function() {
return this.id.match(/element[\d]+div[\d]+/)
}).css({color:'red'});
Using vanilla js :
for (var divs=document.getElementsByTagName('div'), i=0; i<divs.length; i++) {
if (divs[i].id.match(/element[\d]+div[\d]+/)) divs[i].style.color="red";
}
This assumes you need to do what you asked, that is apply a style to elements found by a regex applied to their id. Most often you can find simpler solutions, though, like adding a class when building the HTML.