I am trying to find out the rule on how to target a class inside cascaded ids and classes so that I will be able to style specific area of a page when I need to modify things. Specifically wordpress child themes.
I have search for a while and so far results are giving me specifics to a particular situation. I like something general that will help me read html and target specific classes to style.
For example in this HTML.
<div class="one-third">
<div id="nav_menu-4" class="widget widget_nav_menu">
<h1 class="title">
<cufon class="cufon cufon-canvas" alt="About " style="width: 72px; height: 24.05px;">
<canvas width="91" height="27" style="width: 91px; height: 27px; top: -2px; left: -1px;"></canvas>
<cufontext>About </cufontext>
</cufon>
<cufon class="cufon cufon-canvas" alt="us" style="width: 27px; height: 24.05px;">
</h1>
<div class="menu-about-us-container">
</div>
</div>
I am trying to change font of H1 Title when it is within a side bar. I tried this but didn't work.
.one-third .title {
font-family: Impact;
}
What is the rule/formula to get specific selector to target specific classes.
Thanks
Try using a selector before the pseudo-class, see:
http://www.w3schools.com/css/css_pseudo_classes.asp
On CSS Syntax
you need to add h1 tag .one-third h1.title {font-family: Impact;}
Related
(First time using StackOverflow, apologies if my formatting is wrong)
As a background: I'm trying to unify live chat from both Twitch and Youtube so they can be both show in the same page at the same time.
Most popular site that does that, StreamLabs, unfortunately doesn't work very well for that, since messages coming from Youtube sometimes get "stuck", which very often make them stop appearing and then they appear all at once.
After checking for alternatives, I came across a site called Botisimo that does that and doesn't have that problem that StreamLabs has, but unlike Labs, I can't manually edit the HTML/CSS/JS of the now unified chat. It shows up in a very simple manner.
How it shows the messages
However, as I'm putting that chat as a browser page in the streaming software, I can manually edit the CSS of that page, but nothing else, which shouldn't be a problem.
The problem appeared after I inspected the page to see the names of the divs/spans I had to change in the CSS: There's 2 spans with the same name.
You can see in the image that before the username, there's 3 badges. Those 3 badges and the username are both called "name"
The code that shows after each message is sent is:
<div class="flex-none message chat" data-platform="twitch" data-name="MOD_LeviathaN" data-message="Testing">
<span class="name">
<img src="https://static-cdn.jtvnw.net/badges/v1/5527c58c-fb7d-422d-b71b-f309dcb85cc1/1" style="margin: 0px 1px;" alt="broadcaster" height="18">
<img src="https://static-cdn.jtvnw.net/badges/v1/09606a1c-6cb2-424f-bfb4-3893d1a4dd6f/1" style="margin: 0px 1px; background-color: white;" alt="subscriber" height="18">
<img src="https://static-cdn.jtvnw.net/badges/v1/bbbe0db0-a598-423e-86d0-f9fb98ca1933/1" style="margin: 0px 1px;" alt="premium" height="18">
</span>
<span class="name" style="color: rgb(167, 166, 166); font-size: 24px; line-height: 120%;">
MOD_LeviathaN
:
</span>
<span class="text" style="color: rgb(0, 0, 0); font-size: 24px; line-height: 120%;">Testing</span>
</div>
So when I style that , it does the same styling on both of them:
Like this
And I want it to show like this:
Desired style
This is how it shows on StreamLabs, which have a variable for the badges and for the name itself, and are obviously different. They're both on the same div class, so the styling is applied as intended. On Botisimo however, the messages are also included in the same div class as the other 2, so It gets styled as well, which is not the desired effect.
Is there a way to either split the badges from the username, or put the message outside that div so it doesn't get styled with both of them, using only CSS since I don't have a way of modifying both the HTML and the JavaScript?
I also tried to hide the badges at least, using the following code:
img[alt~="broadcaster"] {
display: none;
}
img[alt~="subscriber"] {
display: none;
}
img[alt~="premium"] {
display: none;
}
This did get rid of the badges, but the style still applied to a small part that was still technically there.
Like that
Thanks in advance for all the help. If there's another completely different site that does the same thing (unifies the chat), I'm willing to try it as well.
If you want to create similar style to the one you mentioned(Desired style) enclose the both span with class="name" in a div or span and apply the css to that div.
actually when you apply css to class "name" it apply on both seperatly when u will enclose it in a div and apply css to that it will be apply to both as one
see css selectors and try to resolve it using id
Can I asked you a question, if you don't mind?
Have you tried putting
<span class="name" style="color: rgb(167, 166, 166); font-size: 24px; line-height: 120%;"> MOD_LeviathaN : </span>
inside the <span class="name"> <img src="https://static-cdn.jtvnw.net/badges/v1/5527c58c-fb7d-422d-b71b-f309dcb85cc1/1" style="margin: 0px 1px;" alt="broadcaster" height="18"> <img src="https://static-cdn.jtvnw.net/badges/v1/09606a1c-6cb2-424f-bfb4-3893d1a4dd6f/1" style="margin: 0px 1px; background-color: white;" alt="subscriber" height="18"> <img src="https://static-cdn.jtvnw.net/badges/v1/bbbe0db0-a598-423e-86d0-f9fb98ca1933/1" style="margin: 0px 1px;" alt="premium" height="18"> </span>
cause I heard it is possible to do it. Then on the <span class="name" style="color: rgb(167, 166, 166); font-size: 24px; line-height: 120%;"> MOD_LeviathaN : </span> try putting an ID on it so it can be separated to the other span you put
I have a particular piece of code in a component which is as follows:
return (
<div className="Home" id="Home">
<Customnav color="" height="80px" padding="5vh"/>
<div className="parent">
<div class="col-5 son">
<span id="codeflow-text" className="codeflow-text">Codeflow</span>
<span style={{color:"black", fontSize:"70px", fontFamily: "Arial"}}><b>Learning</b></span>
</div>
<div class="col-7 daughter">
<img src={img1} alt="loading"/>
</div>
</div>
</div>
);
Now I have imported Home.css in this js file part of which is as follows:
div#Home span.codeflow-text {
color: "#1cbdd6" !important;
font-size: "70px";
font-family: "Raleway";
}
Now according to me, the word "Codeflow" should import the attributes which I defined but it's not working. On Inspecting I am getting this in the browser:
I tried to increase the specificity and I know the rule of using !important. But something seems to be wrong here. Please help.
In CSS, the value of property should not be wrapped within "(Except some special case). Change your Home.css file as follow
div#Home span.codeflow-text {
color: #1cbdd6 !important;
font-size: 70px;
font-family: Raleway;
}
Why do you add "" between color and font-size. Just remove them.
I am trying to override the right property for a h1 element that it is inheriting from the carousel-caption bootstrap class. It inherits right:15% and I am trying to set it to 0%. I found another post that led me to add id="bootstrap-overrides"to the tag and then use the selector: #bootstrap-overrides h1.second but this still doesn't remove the property. I check also in the inspect element and this property is not crossed out. When I uncheck this property in the inspect element I am left with the behaviour I desire.
code from React component:
<div id="initialImage">
<img src={logo} alt="Failed to load Image" class="img-fluid" />
<div class="carousel-caption greeting">
<h1 class="first">First.</h1>
<h1 class="second">Second.</h1>
</div>
</div>
CSS:
#bootstrap-overrides h1.second {
right: 0%;
float: right;
font-family: "Rock Salt", cursive;
color: #fff2f4;
}
and as mentioned I have an id #bootstrap-overrides in the body tag of my index.html. Could it have something to do with the location of the import for boostrap?
Just to confirm, are you adding id="bootstrap-overrides" directly to the h1?
If so, your css should look like this: h1#bootstrap-overrides otherwise, if you are applying it to the parent of h1, then try adding important to your css like so: #bootstrap-overrides h1 { right: 0!important; }
I am using quill editor. and storing the data inside MySQL DB along with the HTML tag.
Example:
<p>heading<p><p><img src=""></p>
Now as I am using angular I have used below code reproduce the same HTML structure which I have saved earlier in DB.
<div class="container-fluid">
<h3 class="fancyFont">Hot Posts</h3>
<div class="row justify-content-md-center">
<div class="col-md" style="width: 100%">
<div style="background:lightgray;">
<div *ngFor="let post of allPosts">
<p [innerHTML]=post.postContent></p>
</div>
</div>
</div>
</div>
</div>
and to give it a proper style I have used the CSS below
p img{
max-width: 100% !important;
}
p {
margin: auto;
padding: 16px;
max-width:100%;
display: inline block;
word-break: break-all
}
But despite doing this I cannot resize or fit my image inside the p tag. To describe innerHtml I can say it will look like this in plain HTML
if you have 2 posts in allposts
[![<div>
<p><p><h1>first post</h1></p></p>
<p><p><h1>Second post</h1><p><p>image</p><p>
<div>][1]][1]
Maybe p inside p tag invalid for HTML 5 and I agree with that. As few members already gave me proof and I also checked it by myself. But in the case of Angular when you use innerHTML like
<p [innerHTML]=post.postContent></p>
It doesn't even matter (Yes I checked my web dev tools and it is working perfectly fine). So the question arises why I was not able to add style to my image tag by using
p img{
max-width:100% !important;
}
p {
max-width:100%;
word-break: break-all
}
because for innerHTML content angular doesn't support that until and unless you add below code in your component.ts file
encapsulation: ViewEncapsulation.None,
I am using single CSS file for all my pages, but I come across with this problem. I have an almost identical (with minor differences) element on two different pages ( let's say home page and about page; This is my CSS codes for a specific element in the Home page, I want to use this for another page with minor differences. How do I name those two classes,
Do I need to use completely separate class names like .home.topcontainer { and .about.topcontainer { etc, or is there any robust way handling this issue?
What is the best way of naming CSS blocks for different pages, if I am using a single CSS file for my whole website to avoid me get confused over class names?
Thanks
CSS
.top_container {
position:relative;
top:3px;
height:144px;
z-index:1;
background-color: #143952;
width: 90%;
left:5%;
right:5%;
font-family: 'Scope One', serif;
overflow:hidden;
min-width:900px;
The best practice is to add some relevant class in body tag (as you can see in several CMS like magento etc.) and then use like this:
<body class="home">
<div class="top_container">
<!-- Do something -->
</div>
</body>
--or--
<body class="about">
<div class="top_container">
<!-- Do something -->
</div>
</body>
now you can use css like:
.home .top_container{}
.about .top_container{}
Let's assume this is your Home page
<div id="home">
<div class="top_container">
//stuff
</div>
</div>
And this is your about page:
<div id="about">
<div class="top_container top_container_about">
//stuff
</div>
</div>
Now, in your CSS file, add the style for the 'top_container' class like so:
.top_container {
//css styles common to the top_container element
}
And then write the style that's unique to the top_container in the about section:
.top_container_about {
//css style unique to the about section
}
This is one way which takes advantage of the 'Cascading' property of a 'Cascading Style Sheet'.
Commonly used practice here is to use a base class and a variation to that base class. That way we use the base css-class for both elements and change it a little by overwriting some values with the variant-class. You didn't specify how you want the top containter to change but here is an example:
.top_container {
background: #000;
color: #fff;
width: 200px;
height: 50px;
padding: 10px;
}
.top_container.top_container--narrow {
width: 100px;
}
<div class="top_container">
Default
</div>
<div class="top_container top_container--narrow">
Narrow
</div>
I add the page name to the body class, and make changes like that using CSS like
.style {
margin: 0;
}
.home .style {
margin: 10px;
}
From what I learned in coding scss, it is better to make your class name a general one. In css only you can make it like this:
CSS
.top-container{
width: 100%;
}
.top-container.about{
width:60%
}
.top-container.contact{
width:30%
}
HTML
home.html
<div class="top-container"></div>
about.html
<div class="top-container about"></div>
contact.html
<div class="top-container contact"></div>
The about class will override whatever style you have in top-container. So its easy to use, short and quite simple. You can use this in making your class name a more general one.
If there are same elements on both pages such as Header then you can use the same class name for them on both pages so that they will look exactly identical on both pages. And for making some changes to those elements you can use different CSS selectors. In the below given code, I have used class and id as selectors.
I HOPE THIS ANSWER MEETS YOUR REQUIRMENTS.
Homepage: header background color is blue.
<header class="top_container" id="home_header">
<!--YOUR WEBSITE HEADER-->
<h1>TITLE</h1>
</header>
<div>
<!--YOUR SITE CONTENT-->
</div>
About page: header background color is red
<header class="top_container" id="about_header">
<!--YOUR WEBSITE HEADER-->
<h1>TITLE</h1>
</header>
<div>
<!--YOUR SITE CONTENT-->
</div>
CSS file:
.top_container{
background-color: blue;
color: white;
}
#about_header{
background-color: red;
}
I would do like so. Cause you might have a .top-container on every page you need to set like a "default" style for .top-container. So CSS Cascading Style Sheet. Cascade from top and if an element needs to be a little different just set the differences in a more specific defined class. Something like so:
.top-container {
/* apply all styles for .top-container */
}
.home.top-container {
/* this .top-container will have all styles from .top-container defined above */
/* so only define all DIFFERENT things for .home.top-container here */
}
.about.top-container {
/* define all DIFFERENT things for .about.top-container here */
/* like before it will always have the .top-container styles */
}