Calling all class with some same character/pharse - html

I have 10 classes with the same start of name (i.e: .ota-1st, ota-2nd... and so on) but all have different background-color.
I want to apply to those classes with same properties.
I remember once I saw some code like .ota-{margin-top:20px}, kind of that.
Is it possible?

Using the attribute selector. https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
div[class*="ota-"] {
color: red;
}
<div class="ota-1">yep</div>
<div class="ota-2">yep</div>
<div class="ota-">yep</div>
<div class="foo">nope</div>
<div class="ota">nope</div>
<div class="asdf-ota-1">nope</div>

Related

How to reference the "second-child" and "third-child" on css?

I don't know how to reference the second and third child on css.
I tried change the first per second and third but don't work.
I only can reference the first and last-child
keypad :first-child :nth-child(1){
background-color: black;
}
keypad :last-child :nth-child(3){
background-color: #b22222;
}
To refer to a specific child from a parent element, do it like this
.keypad:nth-child(2)
First, in your css you should set . if keypad is the name of a class or # if it is an id. Then use :nth-child to refer the order of a child:
.keypad:nth-child(2){
background-color: black;
}
.keypad:nth-child(3){
background-color: #b22222;
}
<div class="container">
<div class="keypad">1</div>
<div class="keypad">2</div>
<div class="keypad">3</div>
<div class="keypad">4</div>
<div class="keypad">5</div>
<div class="keypad">6</div>
<div class="keypad">7</div>
<div class="keypad">8</div>
</div>
you have not used the class(.) or Id identifier(#) when calling the CSS element use :
.keypad:nth-child(2){....}
for class selectors and
#keypad:nth-child(2){....}
for Id selectors

css display none select div relative behind

i wanted to know if in css there is a way to inject a display none to the relative of an attribute es;
<div class="classeA">
<div class="classeB" data-userid="1234" >
</div>
</div>
what should i use?
[data-userid="1234"] < .classeA{
display:none !important;
}
what should I do?
I want class classA with display none selecting the data-userid attribute
You could consider using :has(), although as of yet there is no support across any browser.
It would look something like this:
.classeA:has([data-userid="1234"]){
display:none;
}
Demo:
$('.classeA:has([data-userid="1234"])').hide();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="classeA">
<div class="classeB" data-userid="1234">
</div>
</div>

Should I give a very specific class name to a div and then select it with class selector or very generic name and select it with descendant selector

Imagine I have a div with children div and grandchildren divs like this:
<div class='1'>
<div class='2'>
<div class='3'>
<div class='4'>
<p class=''>Username</p>
<p class=''>Description</p>
<p class=''>Views</p>
</div>
</div>
</div>
</div>
Let's say I want to give a class name to the first <p> element so I can apply some CSS to the first <p> element only.
Should I give it a generic class name like 'username' and then select that username using descendant selector like this:
.1 .2 .3 .4 .username {
color: black;
}
Or should I give it a very specific class name like 'profile-page-username' and select it with the class selector like this:
.profile-page-username {
color: black;
}
If I understand it correctly, if I use the first way, I can give class name of 'username' to as many elements as I want and still apply different CSS rules to each one of them because I'm not selecting all elements with 'username' but only the element with 'username' that is children to the previously mentioned elements.
I'm wondering if one way is better/more used/more conventional than the other.
In your example, I would create a specific class name.
Your question falls into the lines of discussion around CSS Scoping. By your example, it looks like you have a specific p that is fairly far down the line of child elements that you want to apply a style to. Whenever I find myself targeting an element so far down where I need to start doing .1 .2 .3 .4, I usually create a separate class for that element. You can still apply a generic style to your p's in your css like below so it will apply to every other p.
p {
color: black;
}
.specificP {
color: green;
}
<div class='1'>
<div class='2'>
<div class='3'>
<div class='4'>
<p class='specificP'>Username</p>
<p class=''>Description</p>
<p class=''>Views</p>
</div>
</div>
</div>
</div>
Why?
Mostly for readability and maintainability. It's a lot easier to ctrl-f on a specific class name than it is to traverse down a tree of child elements to find where your style is applied.
You shouldn't use a class if you want to apply the css only to one element.
Use a individual id instead, like:
<p id="yourID"> username </p>
<p id="yourSecondID"> username </p>
etc...
Classes are commonly used if you want to apply some CSS to multiple HTML elements.
In your case, your CSS would look like:
#yourID{
//Some css
}
#yourSecondID{
//Some more css
}
etc...
if you are going to keep the styling same for the username throughout the website, you should specify it specifically. like so-
HTML File
<div class='1'>
<div class='2'>
<p class='profile-page-username'>Username</p>
<div class='3'>
<div class='4'>
<p class='profile-page-username'>Username</p>
</div>
</div>
</div>
CSS File
// for the first p attribute
.profile-page-username{
color: red; // all elements with this class will have the same styling
}
But if you want to style it differently at different places you should use the former. like so-
HTML File
<div class='1'>
<div class='2'>
<p class='username'>Username</p>
<div class='3'>
<div class='4'>
<p class='username'>Username</p>
</div>
</div>
</div>
CSS File
// for the first p attribute
.1 > .2 > .username{
color: red;
}
// for the second p attribute
.1 > .2 > .3 > .4 > .username{
color: blue;
}

How to change value of class in another class?

Here's some code:
<div id="one">
<div id="two">
<div class="cell_pad">
</div>
</div>
</div>
How to tell to css, that you have to change value of class "cell_pad" which is in id="one"?
.cell_pad is repeated a few times in code, but I've to change one occurence of this class.
I'm using sparky framework for joomla.
I've tried like that in my stylesheet, but it doesn't effect:
#one > .cell_pad{}
you should use
#one .cell_pad{}
that Selects all .cell_pad elements inside #one elements, you sould take a look here http://www.w3schools.com/cssref/css_selectors.asp
You should use this :
#one .cell_pad
{
}
This will select all the .cell_pad elements in #one element

CSS: about div id and div class

Good day guys! I'm a newbie here and I'm just wondering how to use div id and div class. Let's say for example, I want to have many div boxes in my site with all the same styles in each box. Is this the right thing to do? Please enlighten me.
HTML:
<div id="body">
<div id="box1" class="style"></div>
<div id="box2" class="style"></div>
<div id="box3" class="style"></div>
//(and so on)//
</div>
CSS:
.style {
//(put elements here)//
}
There is not really a right thing to do as everything depends on the situation and circumstances.
Why would you think that this would be the "wrong" thing to do? This cuts down on the amount of code you have to write, so it is favorable, correct?
You can also use the IDs you have to override styles for the <div>s individually:
.style {
color: red;
}
#body1 {
color: blue;
}
Due to the fact that elements, IDs, and classes each have difference selector precedence, I advise against using anything except for classes and psuedo-classes no matter how attractive other prospects may seem. If you're disciplined about it, your CSS will be easier to update later on. The above example would work exactly the same if body1 were a class instead of an ID (I would suggest using IDs to identify unique elements for DOM manipulation, though).
I would also follow the W3C's advice when picking class names for elements and using them in your HTML:
...authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.
ID's are unique:
-Each element can have only one ID
-Each page can have only one element with that ID
Classes are NOT unique:
-You can use the same class on multiple elements.
-You can use multiple classes on the same element.
Yes that would work. Though the id's would not be needed if all you want to do is apply the same style to all 3.
http://www.w3schools.com/tags/att_global_id.asp
http://www.w3schools.com/tags/att_global_class.asp
Yes You can do that if you want to have same style applied to all divs than you can definitely use class to apply styling to divs. If your div is going to be different than others than you can can probably use id which will allow you to access that div through javascript also.
If it is only styling then id is not really required and you need not to give class name if it is same class for all child divs.
HTML
<div id="body">
<div></div>
<div></div>
<div></div>
</div>
CSS
#body div {
background:red;
width:100px;
height:100px;
display:inline-block
}
DEMO
You can use "class" in many div's but you can use "id" in only one place. Because ID should be unique in each page.
<div id="body">
<div class="mystyle"></div>
<div class="mystyle"></div>
<div class="mystyle"></div>
//(and so on)//
</div>
<style>
.mystyle{color:#000;}
<style>
You can use this
<div id="demo">
<div class="box test"></div>
<div class="box test"></div>
<div class="box test"></div>
</div>
CSS:
#demo
{
margin:0;
padding:0;
}
.box
{
Width:100px;
height:50px;
background:red;
}
.test
{
color:white;
}
you can apply two class.