I am working on a website where centered text sometimes was applied using inline style and others, an external style sheet.
<p style="text-align: center;">Centered Text</p>
<p class="center">Centered Text</p>
.center {text-align: center;}
Is there a CSS selector that can target all centered text regardless of the method by which they were centered?
And please, keep in mind that the question is not whether this method for centering was done properly.
You can select it with the following line:
.center, p[style="text-align: center;"] {
color:red;
}
But it's very ugly to use
why not just define them all as a class and add as needed.
In the css you can define
.myCenteringClass {
text-align: center;
}
then anywhere in the html just do
<div class="myCenteringClass">asdfadsf</div>
<p class="myCenteringClass">dasfdsaf</p>
Related
I wrote simple CSS to align text using the w3schools example with:
text-align:center
When I add an underline in the same format, the underline works.
Here's the snippet:
.CenterIt {
text-align:center;
}
.UnderlineIt {
text-decoration:underline;
}
<span class="UnderlineIt">
<span class="CenterIt">Registration Form</span>
</span>
Here's the w3schools page (the align text section):
https://www.w3schools.com/css/css_align.asp
In my full code I have the text I want to center inside another box. I've tried it both inside that box and outside any boxes. It doesn't center.
.CenterIt {
text-align:center;
display:block;
}
.UnderlineIt {
text-decoration:underline;
}
<span class="UnderlineIt">
<span class="CenterIt">Registration Form</span>
</span>
The display property of span by default is inline. i.e.,
display:inline;
Therefore, <span> will take only the width of its content. In contrast, block elements like <div>, by default, take the full line (and thereby the full width of the page) for its content.
To make the text-align work for <span>, you need to change it into a block element.
Set
display: block;
for the span with .CenterIt class. This will make .CenterIt take the full line (and thereby the full width of the page), and then the text-align: center; will centralize the content.
Try this. You need to wrap it with a container unit of <div>
<div class="UnderlineIt">
<div class="CenterIt">Registration Form</div>
</div>
Following will work as well
<span class="UnderlineIt">
<div class="CenterIt">Registration Form</div>
</span>
It might work better if you run “display: flex;” on the container span and “justify-content: center;” on the child span. Flexbox is a little easier to use when placing items within a container.
Because your html, is in wrong format. You cant have a span child of a span.
try like this:
<div class="CenterIt">
<span class="UnderlineIt">Registration Form</span>
</div>
to have the span centered , without a parent div you would need to put the display, as block.
so you could have on your html and css like this:
span{display:block;}
.CenterIt {
text-align:center;
}
.UnderlineIt {
text-decoration:underline;
}
html:
<span class="UnderlineIt CenterIt">Registration Form</span>
Currently I have the following piece of code available which needs to be styled:
<div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item">
<p>summary</p>
<p>body</p>
</div>
I would like to keep the HTML as-is and style the 'p' of both the summary and the body in a different way.
Is that possible? How? Thank you!
Yep it is :
div p:nth-child(1){
color: red;
}
div p:nth-child(2){
color: blue;
}
<div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item">
<p>summary</p>
<p>body</p>
</div>
You need to use :nth-child() cssSelector to apply different styles for each tag. Look at below example.
div p:nth-child(1){
color:red;
}
div p:nth-child(2){
color:green;
}
You can either do that:
<p style="background-color:#000000;"></p>
Or do that:
First, add the "id" tag in your paragraphs tags.
<p id="bodyParagraph"></p>
Second, on the head tags include the:
<style>
#bodyParagraph{
background-color:#000000;
}
</style>
Why wouldn't you want to add specific classes to the summary paragraph and another for the body paragraph? Nothing wrong with that.
<p class="summary"> and <p class="body"> with their respective styling.
If you really want to avoid using a specific class for each, I'd suggest checking out the :first-child and nth-child pseudo-elements, so you style the first paragraph of that particular div one way and any other paragraphs a different way.
Assuming that the body paragraph might be multiple paragraphs, I'd strongly recommend against this approach since it will be hacky, more confusing, and more time consuming than just giving each paragraph its own style.
Sources:
W3Schools - first-child pseudo-element and W3Schools - nth-child pseudo-element
I'm pulling my hair out here trying to get CSS to position only a handful of html elements.
Here is the code:
http://jsfiddle.net/7pTL8/
What I want is for "person#business.com [v]" to be at the top-right and then below it "Average Depth," "[x] Settings", and "Past 24 hours [v]" are all displayed together at the same level. I've tried floats and that had strange results. I don't want to resort to using a table here because everything I read about CSS suggests using tables for layout is a poor solution.
Its not as tuff as you think..
here is small solution.. its not very good but it can solve you problem for now..
[a link] http://jsfiddle.net/7pTL8/2/
<div id="user-selection">person#business.com [v]</div>
<div id="settings-container">
<h1 id="graph-title">Average Depth</h1>
<span id="settings-button">[x] Settings</span>
<span id="timeframe-dropdown">Past 24 hours [v]</span>
</div>
CSS
#graph-title {
position:absolute;
left:1px;
text-align: left;
}
#settings-container {
text-align: right;
}
#user-selection {
text-align: right;
}
Your problem is probably the use of h1 element. By default h1 has the style display: block. If you add the style display: inline it will be fine.
EDIT:
I think you ought to use span for it if you don't have any special reasons.
<span> elements use display:inline, while <h1> elements use block by default. Manually override the #graph-title to use display:inline and it will line up with the rest of your elements:
#graph-title
{
display:inline;
}
I saw this selector in Twitter Bootstrap:
.show-grid [class*="span"] {
background-color: #eee;
text-align: center;
border-radius: 3px;
min-height: 30px;
line-height: 30px;
}
Does anyone know what this technique is called and what it does?
It's an attribute wildcard selector. In the sample you've given, it looks for any child element under .show-grid that has a class that CONTAINS span.
So would select the <strong> element in this example:
<div class="show-grid">
<strong class="span6">Blah blah</strong>
</div>
You can also do searches for 'begins with...'
div[class^="something"] { }
which would work on something like this:-
<div class="something-else-class"></div>
and 'ends with...'
div[class$="something"] { }
which would work on
<div class="you-are-something"></div>
Good references
CSS3 Attribute Selectors: Substring Matching
The 30 CSS Selectors you Must Memorize
W3C CSS3 Selectors
.show-grid [class*="span"]
It's a CSS selector that selects all elements with the class show-grid that has a child element whose class contains the name span.
The Following:
.show-grid [class*="span"] {
means that all child elements of '.show-grid' with a class that CONTAINS the word 'span' in it will acquire those CSS properties.
<div class="show-grid">
<div class="span">.span</div>
<div class="span6">span6</div>
<div class="attention-span">attention</div>
<div class="spanish">spanish</div>
<div class="mariospan">mariospan</div>
<div class="espanol">espanol</div>
<div>
<div class="span">.span</div>
</div>
<p class="span">span</p>
<span class="span">I do GET HIT</span>
<span>I DO NOT GET HIT since I need a class of 'span'</span>
</div>
<div class="span">I DO NOT GET HIT since I'm outside of .show-grid</span>
All of the elements get hit except for the <span> by itself.
In Regards to Bootstrap:
span6 : this was Bootstrap 2's scaffolding technique which divided a section into a horizontal grid, based on parts of 12. Thus span6 would have a width of 50%.
In the current day implementation of Bootstrap (v.3 and v.4), you now use the .col-* classes (e.g. col-sm-6), which also specifies a media breakpoint to handle responsiveness when the window shrinks below a certain size. Check Bootstrap 4.1 and Bootstrap 3.3.7 for more documentation. I would recommend going with a later Bootstrap nowadays
It selects all elements where the class name contains the string "span" somewhere. There's also ^= for the beginning of a string, and $= for the end of a string. Here's a good reference for some CSS selectors.
I'm only familiar with the bootstrap classes spanX where X is an integer, but if there were other selectors that ended in span, it would also fall under these rules.
It just helps to apply blanket CSS rules.
In my case I'm unable to apply background color for class due to dynamic change of class name with numbers
Ex:
Issue:
body .ForwardRef-root-198 .aura-ag-grid .ag-row:hover, body .ForwardRef-root-198 .ag-details-grid .ag-row:hover {
background-color: #2196f35c !important;
}
Solution:
body div[class*="ForwardRef-root-"] .aura-ag-grid .ag-row:hover, body div[class*="ForwardRef-root-"] .ag-details-grid .ag-row:hover {
background-color: #2196f35c !important;
}
Reference: link
Can you use the word div to name a div class? or id?
for example:
#div.leftcol
or does it just get seen as
#leftcol
The browser will see that as <div id="div" class="leftcol"></div>
I don't follow what you mean, but I think what you're asking is can you use the word div to apply a class to div elements. If that's what you mean, then yes you can, and you do it exactly as you have shown in your question:
div.leftcol { color: red }
That style would be applied to all elements of type div with class leftcol. Without the div part, the style would apply to any element with class leftcol, regardless of what type of element it is:
.leftcol { color: red }
Edit now the question has been edited...
After the edit to your question, it makes a bit more sense (I think). Your first example would apply to an element with an id of div and a class of leftcol:
<div id="div" class="leftcol"></div>
The second example would apply to an element with an id of leftcol:
<div id="leftcol"></div>
Or if you are simply asking whether div is a some sort of reserved word in CSS, no, it's not, so feel free to use it as an identifier. However, that could get confusing (for example, you could end up with selectors like div.div #div)
can you provide an example?
you can use <div class="leftcol"> left content </div>
and then in your css .leftcol { background:red; }
you can address it either div.leftcol or just simple .leftcol
As in?
<div id="div.leftcol">Some content</div>
While it may work for HTML and Javascript it should cause a problem if you try to style it in a CSS stylesheet. As I am sure you know the following
div.leftcol {
color: #efefef;
}
means "Set the text color to #efefef for any div element that has leftcol as a class name" so it would not work. I have no idea if
div.div.leftcol {
color: #efefef;
}
would work but that is just ugly...